'元素隐式具有'any'类型，因为'string'类型的表达式不能用于*ngFor中的Object中的类型索引

Question

我正在尝试显示以下 object：

export const articles = {
  hardware: ['CPU', 'Motherboard', 'GPU', 'RAM', 'Power Supply'],
  Software: ['Operating System', 'Program', 'Web Site'],
  compsci: ['Algorithm', 'Programming', 'Data Structure']
}

像这样：

<h2>Browse through our articles:</h2>
<section *ngFor="let key of keys">
  {{key}}
  <div *ngIf="myArticles.hasOwnProperty(key)">
    <span *ngFor="let arr of myArticles[key]"><app-list-detail [list]="arr"></app-list-detail></span>
  </div>
</section>

arr作为list发送到子组件的位置。 但我得到标题中的错误。 我认为是因为 TS 无法知道key是否是myArticles的实际属性，所以我在上面添加了 * ngIf 。

但它仍然不起作用，我不明白为什么。

Answer 1

您可以使用键值keyvalue来迭代对象：

<h2>Browse through our articles:</h2>
<section *ngFor="let entry of articles | keyvalue">
  {{entry.key}}
  <span *ngFor="let arr of entry.value"><app-list-detail [list]="arr"></app-list-detail></span>
</section>

Answer 2

要克服该错误，您需要指定articles的类型。 您可以将类型指定为：

    export const articles: Record<string, string[]> = {
      hardware: ['CPU', 'Motherboard', 'GPU', 'RAM', 'Power Supply'],
      Software: ['Operating System', 'Program', 'Web Site'],
      compsci: ['Algorithm', 'Programming', 'Data Structure']
    }