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

Question

我在 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" />

我想过滤数组并使用 angular 管道在 html 中仅显示一个字符串。但是这个管道return我的错误是：多个组件匹配节点与标记名

任何人都可以建议我如何过滤数组并在 angular 中仅显示单个字符串吗？

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

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

Answer 1

您可以试试这个代码：

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

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

How to filter array and show string into single place using angular pipe?

string

pipe

array-filter

angular

这是html代码：

这是我的烟斗：

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