如何使用角管过滤数组并将字符串显示到单个位置？

编程问答 2022-05-22

问题描述

我有一个 angular 数组和一种形式，我想在其中替换该数组中占位符的值。

检查下面的代码：

fieldType = [{
   id: 1,defaultData: {
      inputPlacehoolder: 'enter Text'
   }
 },{
   id: 2,defaultData: {
      inputPlacehoolder: 'enter Email'
   }
 },{
   id: 3,defaultData: {
      inputPlacehoolder: 'enter Value'
   }
}]

fieldArray = [
   {
      type: 1,value: "demo"
   },{
      type: 2,value: "demo@gmail.com"
   }
]

这里是HTML代码：

<form *ngFor="let field of fieldArray">
    <input type="text" placeholder="{{ fieldType | filterPipe: field.type : 'inputPlacehoolder' }}" />
</form>

这是我的烟斗：

transformPipe(fieldType,id,key) {
    return fieldType.find(item => item.id == id).defaultData[key]
}

预期的输出应该是这样的：

<input type="text" placeholder="enter Text" />
<input type="text" placeholder="enter Email" />

我想过滤数组并使用角管在 html 中仅显示一个字符串。但是这个管道返回我的错误，如：多个组件匹配带有标记名的节点

谁能建议我如何过滤数组并以角度仅显示单个字符串？

我无法在该 placeholder 绑定中调用函数，因为它会导致性能问题，甚至无法合并这两个数组以使用循环显示直接值。

管道是唯一的方法。请帮我弄清楚...

解决方法

你可以试试这个代码：

export class FilterPipe implements PipeTransform {
  transform(fieldType: any[],id: any,key: any): any {
    let placeholder =   fieldType.filter(r => r.id == id).length>0? fieldType.filter(r => r.id == id)[0].defaultData
      .inputPlacehoolder:"";

    return placeholder;
  }
}

更多查看此代码： https://stackblitz.com/edit/angular-ivy-mis3fx?file=src%2Fapp%2FfilterPipe.ts

angularangulararray-filterpipestringstring