Question

我有一个list: any[]表达式中使用的对象数组（*ngFor）。当我在运行时知道属性名称时，是否可以显示对象的属性之一？

我正在创建一个名为ListComponent的组件，该组件显示项目列表。名为ParentComponent的父组件将传入对象数组和它希望ListComponent在列表中显示的属性。这是我到目前为止在ListComponent中所拥有的东西：

<div>
<div class="item" *ngFor="let item of itemList">{{item.name}}</div>
</div>

是否可以使{{item.name}}动态化并使用.name传递的属性来代替ParentComponent？

Answer 1

尝试以下代码。这里的名称是变量，可以根据组件动态变化。

<div>
<div class="item" *ngFor="let item of itemList">{{item[name]}}</div>
</div>

Answer 2

您可以在.ts中创建一个'dynamicKey'变量，以进行更改并按如下方式对其进行访问。对于未定义的情况，您还可以选择提供默认或空字符串。

<div>
    <div class="item" *ngFor="let item of itemList">{{item[dynamicKey] || ''}}</div>
</div>

另一种方法可能是根据您的动态键从对象创建数组，以减少模板中的逻辑。

dynamicArray = itemList.map(item => item[dynamicKey])
<div>
    <div class="item" *ngFor="let item of dynamicArray">{{item}}</div>
</div>

Answer 3

组件

  @Input()  parentKey
  itemList=[{key:'State',value:'state'},
  {key:'Severity',value:'severity'},
  {key:'Priority',value:'priority'},
  {key:'Category',value:'categorization'},{key:'Owner',value:'owner'}

HTML

<div>
<div class="item" *ngFor="let item of itemList">{{item[parentKey]}}</div>
</div>

Stackblitz链接：https://stackblitz.com/edit/angular-fakfmp?file=src/app/app.component.html

如何在ngFor中进行动态表达？

3 个答案: