Question

如何在我的控制器中更改此内容

types = {
   'fru':   'Fruits',
   'veg':   'Vegetables',
};

允许我在我的视图中执行此操作（a）

<span class="value">{{ types['fru'] }}</span>

这在我看来（b）

<div *ngFor="let value of types">
    {{ value }}
</div>

目前，（a）工作正常，（b）抛出＆＃34;错误错误：找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays。＆＃34;

我明白我的对象无法迭代。我的问题是，有没有办法将我的控制器中的对象更改为另一个数据结构，以便能够在我的视图中实现所需的功能？

Answer 1

你走了：

组件方：

objectKeys = Object.keys;
data = {
    'fru':   'Fruits',
    'veg':   'Vegetables',
};

模板面：

<ul>
    <li *ngFor='let key of objectKeys(data)'>
        Key: {{key}}, value: {{data[key]}}
    </li>
</ul>

<强> WORKING DEMO

Answer 2

你可以使用

*ngFor="let t of templates | keyvalue"

https://angular.io/api/common/KeyValuePipe

Answer 3

你不能迭代一个对象，* ngFor只适用于数组。

您实际可以做的是创建并使用管道将对象键值转换为数组并迭代它：

@Pipe({ name: 'keyValue' })
export class KeyValuePipe implements PipeTransform {
  transform(value, args: string[]): any {
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key]});
    }
    return keys;
  }
}

使用示例：

<ul>
  <li *ngFor='key of demo | keyValue'>
     Key: {{key.key}}, value: {{key.value}}
  </li>
</ul>

按键获取元素并迭代键值对

3 个答案: