Угловой: limitTo pipe не работает

Я пытаюсь запустить limitTo pipe на Angular2 в строке:

{{ item.description | limitTo : 20 }}

И я получаю следующую ошибку:

The pipe 'limitTo' could not be found

Возможно ли, что эта труба была удалена в Angular2?

Это мой app.module

импортировать {TruncatePipe} из './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>

angular angular-pipe
person Yuvals    schedule 13.10.2016    source источник
comment
limitTo недоступен в Angular 2 как общая часть, как видно на в справочнике по API. Однако вы можете построить свою собственную трубу.   -  person Roy    schedule 13.10.2016

Ответы (5)


arrow_upward
26
arrow_downward

Для начала нужно создать трубу.

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

Демо плункер

person Libu Mathew    schedule 13.10.2016
comment
Я пробовал это и продолжаю получать: [ts] Аргумент типа '{moduleId: string; селектор: строка; templateUrl: строка; трубы: typeof TruncatePipe []; styleUrl ... 'не может быть назначен параметру типа' Component '. Литерал объекта может указывать только известные свойства, а «каналы» не существуют в типе «Компонент». импортировать TruncatePipe - person Yuvals; 13.10.2016
comment
Вы вставили трубку в объявления вашего модуля? то есть @NgModule - person Libu Mathew; 13.10.2016
comment
Добавить трубу в модуль, а не в компонент. - person Libu Mathew; 13.10.2016
comment
Я добавил его в NgModule, но продолжаю получать в моем компоненте следующую ошибку: канал limitTo не может быть найден - person Yuvals; 13.10.2016
comment
Убедитесь, что имя канала - limitTo или что-то еще. Предоставьте исходный код вашего канала. - person Libu Mathew; 13.10.2016
comment
во-первых - большое спасибо за вашу помощь. Похоже, проблема в том, что мой пайп не был перезагружен процессом наблюдения .. очень странно - person Yuvals; 13.10.2016

arrow_upward
74
arrow_downward

Чтобы ответить на ваш вопрос, было ли оно удалено: да и нет. Кажется, что limitTo удален, но есть канал slice, который в основном делает то же самое, что и limitTo, и может использоваться как для строк, так и для списков. Это также дает вам возможность начать ограничение с заданного начального индекса, что очень удобно.

В вашем случае будет достаточно простого {{ item.description | slice:0:20 }}. Если только вы не хотите набраться опыта в написании собственной трубы, что я даже поощряю;)

Источник и документация: https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

person Daniel Varela    schedule 14.02.2017
comment
Именно то, что мне нужно! - person Rafique Mohammed; 15.06.2018

arrow_upward
6
arrow_downward

Я добавил этот код, чтобы было понятнее

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

чтобы показать, что данные разделены и содержат больше скрытых данных

person Akhil    schedule 15.10.2019
comment
отлично работает, как ожидалось - person Nithin Paul; 16.01.2021

arrow_upward
2
arrow_downward

Вместо этого вы можете использовать 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>
person Frank Nguyen    schedule 10.07.2017

arrow_upward
1
arrow_downward

Простая душа для ограничения записей

<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.
person Shashwat Gupta    schedule 12.03.2020