использование пользовательского канала с троичным оператором для * ngFor

Question

Я использую пользовательский канал с троичным оператором для *ngFor, получаю ошибки.Не зная, как решить.Пожалуйста, помогите.

html:

<div *ngFor="let x of y | limitTo: y.limit ? y.length : 10">

truncate.pipe.ts:

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

@Pipe({
  name: 'limitTo'
})
export class TruncatePipe {
  transform(value: string, limit:number) : string {
    let trail = '...';

    return value.length > limit ? limit + trail : value;
  }
}

app.module.ts:

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

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

export class AppModule { }

Ошибка:

Не удается найти другой поддерживающий объект '10 ... 'типа' строка '.NgFor поддерживает только привязку к Iterables, таким как Arrays`.в html файле

Answer 1

Вы передаете строку в ngFor, которая не принимается.убедитесь, что вы передаете массив.то есть "х" должен быть массивом

Answer 2

Спасибо всем

Решение отработано:

<div *ngFor="let x of (y.limit ? (y | slice: 0 : y.length) : (y | slice: 0 : 10))">

Answer 3

Вы передаете весь массив в свою трубу.Если длина больше, чем предел, он вернет массив без изменений.В противном случае он будет возвращать длину массива с последующим трейлом.

Скорее всего, у вас есть массив y = ['str-1', 'str-2', 'str-3'...] Ваш вызов канала равен limitTo: y.limit ? y.length : 10 Если его значение у y не имеет предельного поля или если оно равно 0, оно будет по умолчанию равно 10.

В вашем вопросе канал был вызван с аргументами value = y и limit = 10 Trail is '...';

Если длина массива y меньше предела (в этом примере 10(что неверно) в конечном итоге он вернет массив без изменений.

В противном случае он вернет limit + trail, что равно 10 + '...'.Это строка.

Строки не повторяются, поэтому вы получите сообщение об ошибке.