21

limitTo文字列でAngular2でパイプを実行しようとしています:

{{ item.description | limitTo : 20 }}

そして、次のエラーが表示されます。

The pipe 'limitTo' could not be found

このパイプがAngular2で削除された可能性はありますか?

これは私のapp.module

import { TruncatePipe } from './limit-to.pipe';

@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>
4

5 に答える 5

2

代わりに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>
于 2017-07-10T07:44:01.260 に答える
1

レコードを制限するためのシンプルなソリューション

<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.
于 2020-03-12T06:02:20.853 に答える