时间戳

首页 > 解决方案 > Angular @Input 数组 - 如何引用不同的数组对象字段名称？

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

问题描述

我想设置一个可重用的下拉菜单，通过它我将一组对象传递给我的下拉组件的@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用于 members[] 实例、idusers[] 实例等，由另一个 @Input 值传入？

标签： htmlarraysangularcomponents

解决方案

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

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

推荐阅读