Angular @Input 数组 - 如何引用不同的数组对象字段名称？

Posted 2023-02-22

【中文标题】Angular @Input 数组 - 如何引用不同的数组对象字段名称？

【英文标题】：Angular @Input array- how to reference different array object field names?

【发布时间】：2021-06-23 04:46:15

【问题描述】：

我想设置一个可重复使用的下拉菜单，通过它我将一个对象数组传递给我的下拉组件的@Input，然后更新其中的一些标签。

数组字段每次都会不同。例如，一个数组可能有一个displayName 字符串字段，而另一个数组将有一个名为id 的字符串作为我要引用的字段。

我不确定如何在每个实例的基础上引用这些。

下拉 html：

<ng-container *ngFor="let item of content">
  <span class="button-label">item.whatever-the-field-is</span>
</ng-container>

下拉组件：

@Input() content: Array<any> = [];

下拉实例：

<multi-button-dropdown [content]="(myArrayObservable$ | async)"></multi-button-dropdown>

示例数组：

users = [
  
    id: 'afvnf102841-251',
    username: 'Joe Bloggs'
  
  ...
]

members = [
  
    displayName: 'Han Solo',
    location: 'Space'
  
  ...
]

问题：

我如何设置 dropdown.html/component 以便 <span> item.... 引用将是 displayName 用于成员 [] 实例，id 用于用户 [] 实例等等，传入通过另一个 @Input 值？

【问题讨论】：

示例数组错误。可能您正在尝试定义对象数组。

谢谢，我完全错过了

【参考方案1】：

我发现我可以创建一个设置标签值的新接口，并将 Observable 数组对象字段映射到该值，然后再将其传递给组件：

this.dropdownUsers = users.map(user => (
  
    label: user.displayName
  
));

<multi-button-dropdown [content]="dropdownUsers"></multi-button-dropdown>

【参考方案2】：

一种快速的方法是使用*ngFor 内的keyvalue 管道在不知道其名称的情况下迭代对象属性。

<ng-container *ngFor="let item of content">
  <span class="button-label" *ngFor="let prop of item | keyvalue">
     prop.key  -  prop.value 
  </span>
</ng-container>