Question

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

{{ item.description | limitTo : 20 }}

我收到以下错误：

The pipe 'limitTo' could not be found

是否可能在Angular2中删除此管道？

这是我的app.module

从＆＃39; ./ limit-to.pipe＆＃39;中导入{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>

Answer 1

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

在你的情况下，一个简单的{{ item.description | slice:0:20 }}就足够了。除非你想获得更多编写自己管道的经验，我甚至鼓励;）

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

Answer 2

首先，您需要创建一个管道。

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

Answer 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>

Answer 4

简单的记录限制

<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.

Answer 5

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

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

显示数据已切片并且包含更多隐藏数据

Angular：limitTo管道无法正常工作

是否可能在Angular2中删除此管道？

5 个答案: