角度：limitTo 管道不起作用

Posted 2023-02-27

【中文标题】角度：limitTo 管道不起作用

【英文标题】：Angular: limitTo pipe not working

【发布时间】：2017-02-23 00:25:33

【问题描述】：

我正在尝试在字符串上的 Angular2 上运行 limitTo 管道：

 item.description | limitTo : 20  

我收到以下错误：

The pipe 'limitTo' could not be found

这个管道有可能在 Angular2 中被移除了吗？

这是我的app.module

从'./limit-to.pipe'导入 TruncatePipe ；

@NgModule(
  imports: [ 
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    RouterModule.forRoot([
      
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      ,
      
        path: 'home',
        component: GridComponent
      ,
    ])
  ],
  declarations: [ 
    AppComponent, 
    TopNavComponent, 
    GridComponent,
    TruncatePipe
  ],
  providers: [
    PinService,
  ],
  bootstrap: [ AppComponent ]
)
export class AppModule  

我正在使用管道的网格组件：

import  Component,OnInit  from '@angular/core';
import  Router    from '@angular/router';

@Component(    
    moduleId : module.id,
    selector: 'my-grid',    
    templateUrl : 'grid.component.html',
    styleUrls: [ 'grid.component.css']
)

export class GridComponent  implements OnInit


    constructor(
        private router: Router,
        private gridService: GridService) 
    

    ngOnInit(): void 
    

我的管道定义：

import  PipeTransform, Pipe   from '@angular/core';

@Pipe(
  name: 'limitToPipe'
)
export class TruncatePipe implements PipeTransform 

  transform(value: string, limit: number) : string 

    let trail = '...';

    return value.length > limit ? value.substring(0, limit) + trail : value;
  

最后是我的模板：

<div *ngFor="let item of items" class="grid-item">
  <p class="simple-item-description">
     item.description | limitToPipe :  20  
  </p>                
</div>

【问题讨论】：

limitTo 在 Angular 2 中不可用，如 in the API reference 所示。但是，您可以构建自己的管道。

【参考方案1】：

首先你需要创建一个管道。

import  Pipe, PipeTransform  from '@angular/core';

@Pipe(
  name: 'limitTo'
)
export class TruncatePipe 
  transform(value: string, args: string) : string 
    // let limit = args.length > 0 ? parseInt(args[0], 10) : 10;
    // let trail = args.length > 1 ? args[1] : '...';
    let limit = args ? parseInt(args, 10) : 10;
    let trail = '...';

    return value.length > limit ? value.substring(0, limit) + trail : value;
  

在module.ts文件中添加管道

import  NgModule       from '@angular/core';
import   TruncatePipe    from './app.pipe';

@NgModule(
  imports:      [
  ],
  declarations: [
    TruncatePipe
  ],
  exports: [ 
  ]
)

export class AppModule  

然后在绑定代码中使用管道：

 item.description | limitTo : 20  

演示plunker

【讨论】：

我试过了，我不断得到：“ [ts] 类型参数 ' moduleId: string; selector: string; templateUrl: string; pipe: typeof TruncatePipe[]; styleUrl...'不可分配给“组件”类型的参数。对象字面量只能指定已知属性，“组件”类型中不存在“管道”。导入 TruncatePipe"

您是否在模块“声明”中注入了管道？即@NgModule

在模块中添加管道而不是在组件中。

我将它添加到 NgModule，但在我的组件中不断出现以下错误：“找不到管道 'limitTo'”

检查管道名称是否为 'limitTo' 或其他任何内容。请提供您的管道源代码。

【参考方案2】：

为了回答您的问题是否已被删除：是和否。 limitTo 似乎已被删除，但有一个 slice 管道与 limitTo 基本相同，可用于字符串和列表。它还使您有机会在给定的起始索引处开始限制，这很简洁。

在您的情况下，一个简单的 item.description | slice:0:20 就足够了。除非您想获得更多编写自己的管道的经验，我什至鼓励这样做;)

来源和文档：https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

【讨论】：

正是我需要的！

【参考方案3】：

您可以改用ng2-truncate

它有更多的选项，例如：按单词截断，按字符截断，截断左侧（...abc）......

$ npm install ng2-truncate --save

声明

import  Component  from '@angular/core';
import  TruncateModule  from 'ng2-truncate';

@Component(
    selector: 'my-component',
    template: '<p> "123456789" | truncate : 3 </p>'
)
export class MyComponent 



@NgModule(
  imports: [ TruncateModule ],
  declarations: [ MyComponent ]
)
export class MyApp  

组件

@Component(
    ...
    template: '<p> "123456789" | truncate : 3 : "..." </p>',
    ...
)

结果：

<p>123...</p>

【参考方案4】：

我添加了这段代码以使其更有意义

 item.description | slice:0:20  item.description.length > 20 ? '....read more' : '' 

显示数据被切片并包含更多隐藏的数据

【参考方案5】：

限制记录的简单方法

<li *ngFor="let item of _source| slice:0:3; let ind=index;">
   item.description
</li> 


Here slice:0:3 --> 3 is the 3 records length means only first three records will be displayed.