web-dev-qa-db-fra.com

Angulaire: limitTo pipe not working

J'essaie d'exécuter limitTo pipe sur Angular2 sur une chaîne:

{{ item.description | limitTo : 20 }}

Et j'obtiens l'erreur suivante:

The pipe 'limitTo' could not be found

Est-il possible que ce tuyau ait été supprimé dans Angular2?

C'est mon app.module

importer {TruncatePipe} depuis './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 { }

Mon composant de grille qui utilise le tuyau:

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 {
    }
}

Ma définition de pipe:

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;
  }

}

Et enfin mon modèle:

<div *ngFor="let item of items" class="grid-item">
  <p class="simple-item-description">
    {{ item.description | limitToPipe :  20 }} 
  </p>                
</div>
angularangular-pipe
19
Yuvals

Vous devez d'abord créer un tuyau.

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;
  }
}

Ajoutez le tube dans le fichier module.ts

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

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

export class AppModule { }

Utilisez ensuite le canal dans le code de liaison:

{{ item.description | limitTo : 20 }}

Démo plunker

21
Libu Mathew

Afin de répondre à votre question si elle a été supprimée: oui et non. limitTo semble avoir été supprimé, mais il existe un tube slice qui fait essentiellement la même chose que limitTo et peut être utilisé sur les chaînes aussi bien que sur les listes. Cela vous donne également l'opportunité de commencer votre limitation à un index de démarrage donné, ce qui est bien.

Dans votre cas, un simple {{ item.description | slice:0:20 }} serait suffisant. À moins que vous ne vouliez acquérir plus d'expérience dans l'écriture de votre propre pipe, ce que j'encourage même;)

Source et documentation: https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

62
Daniel Varela

Vous pouvez utiliser ng2-truncate à la place

Il a plus d'options telles que: tronquer par des mots, tronquer par des caractères, tronquer le côté gauche (... abc) ....

$ npm install ng2-truncate --save

Déclarations

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 { }

Composant

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

Résultat:

<p>123...</p>
2
Frank Nguyen