使用 TypeScript 在 Angular 中迭代对象的正确方法是什么？答案

【问题标题】：What is the correct approach to iterating over objects in Angular with TypeScript?使用 TypeScript 在 Angular 中迭代对象的正确方法是什么？
【发布时间】：2021-02-22 17:36:10
【问题描述】：

我正在尝试使用 ngFor 迭代复杂对象，但在使用推荐的键值管道时遇到了问题。当我尝试将密钥作为参数传递给我正在传递给我在 ngFor 内渲染的组件的函数时，TypeScript 抱怨“未知类型的参数不能分配给字符串类型的参数”。

<div *ngFor="let item of items | keyvalue">
  <component [onItemUpdate]="onItemUpdate(item.key)"></component>
</div>

TypeScript 抱怨 item.key 的类型未知并且 onItemUpdate() 的参数应该是一个字符串。但是， item.key 将始终是一个字符串。解决这个问题的正确方法是什么？

我曾考虑尝试将对象转换为数组，但这似乎是一种解决方法，而不是对似乎源于 TypeScript 的问题的实际解决方案。有没有办法为键值管道中的键声明类型？

【问题讨论】：

标签： angular typescript

【解决方案1】：

您可以定义声明对象的键和值的类型，例如：

item: { [key: string]: string};

或者作为一种解决方法，只需将 onItemUpdate 函数输入参数类型更改为任何。甚至只是onItemUpdate(item.key.toString())。

【讨论】：