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.