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

如何在控制器中更改此设置

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

在某种程度上允许我在我的观点中这样做（a）

{{types['fru']}

我认为（b）

{{value}}

?

目前，（a）工作正常，（b）抛出“错误错误：找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到数组等可重用对象。”

---

我知道我的对象不能被迭代。我的问题是，是否有办法将控制器中的对象更改为另一种数据结构，以便在我的视图中实现两种所需的功能？

您不能在对象上迭代，*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>

键：{Key.Key}，值：{{Key.value}

您不能在对象上迭代，*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>

键：{Key.Key}，值：{{Key.value}

给你：

组件端：

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

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

模板端：

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

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

给你：

组件端：

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

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

模板端：

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

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

您可以使用

*ngFor="let t of templates | keyvalue"

您可以使用

*ngFor="let t of templates | keyvalue"

---

我认为for iterate over for loop

类型的可能重复应该是
[{“fru”：“fruit”，“veg”：“vegets”}]
数组列表。@hrdkissback，这只是一点点代码更改，您可以获得关于逻辑的相同内容，而不是确切的代码。您也可以查看我在下面发布的答案。@Vivek，是的，我看到了这个错误`“错误错误：找不到不同的支持对象'[object object]'类型的'object'。NgFor只支持绑定到数组之类的Iterables。”`I注释：）。我认为for iterate over for loop
类型的可能重复应该是
[{“fru”：“水果”、“蔬菜”：“蔬菜”}]
数组列表。@hrdkisback，这只是一点代码更改，您可以获得与逻辑相同的结果，而不是精确的代码。您也可以检查我在下面发布的答案以显示。@Vivek，是的，我看到了此错误`“错误：找不到不同的支持对象”[object object]'of type'object'.NgFor仅支持绑定到数组等可重用文件。“'I commented:）（1）如何在代码中实现管道？我已将其复制到控制器中并获取：未捕获错误：模板解析错误：找不到管道'keyValue'。（2）如前所述，理想情况下，我正在寻找一种不同的数据结构来实现这一点，那么数组或映射呢？（1）如何在代码中实现管道？我已将其复制到我的控制器中，并获得：未捕获错误：模板解析错误：找不到管道“keyValue”…（2）如前所述，理想情况下，我正在寻找一种不同的数据结构来实现这一点，那么数组或映射呢？