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

Question

I'm trying to display the following object:

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

Like this:

<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>

Where arr gets sent to a child component as list . But I get the error in the title. I thought it was because TS had no way to know if key was an actual property of myArticles , so I added the * ngIf above.

But it still doesn't work, and I don't understand why.

Answer 1

You can use keyvalue pipe to iterate on objects:

<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

To overcome the error you would need to specify type for articles . You can specify type as:

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