对* ngFor使用带有三元运算符的自定义管道 [英] using custom pipe with ternary operator for *ngFor

查看:68
本文介绍了对* ngFor使用带有三元运算符的自定义管道的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在对 * ngFor 使用带有三元运算符的自定义管道,但出现错误.不知道如何解决.请帮忙.

I am using custom pipe with ternary operator for *ngFor, getting errors. Not knowing how to resolve. Please kindly help.

html:

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

truncate.pipe.ts:

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:

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文件中

Cannot find a differ supporting object '10...' of type 'string'. NgFor only supports binding to Iterables such as Arrays`. in html file

推荐答案

您正在将字符串传递给ngFor,但不接受.确保您通过数组.即"x"应为数组

You're passing string to the ngFor which is not accepted. make sure you pass the array. i.e "x" should be array

这篇关于对* ngFor使用带有三元运算符的自定义管道的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆