Вложенный * ngFor от объекта со списком объектов

Question

У меня есть свойство в компоненте с именем companies:

companies: Company[];

У каждой компании есть список products:

export class Company {
  id: number; //my own class
  name: string;

  products: Product[] = []; //company have products
                            //Product is a diffrent object like Company
}

Но когда я получаю данные (company с products), список products не имеет типа (Product теперь Object).

В шаблоне компонента я хочу создать вложенный *ngFor, например:

<mat-expansion-panel>
  <mat-expansion-panel-header
    *ngFor="let company of companies"
  >
    <mat-panel-title>{{ company.name }}</mat-panel-title>
  </mat-expansion-panel-header>
  <mat-selection-list>
    <mat-list-item *ngFor="let product of companies.products">
      {{ product.name }}
    </mat-list-item>
  </mat-selection-list>
</mat-expansion-panel>

Тем не менее, я получаю сообщение об ошибке в консоли:

ОШИБКА TypeError: Невозможно прочитать свойство 'products' из неопределенного

Список компаний отображается нормально, но без соответствующих продуктов в компании.

У меня вопрос, как правильно кодировать *ngFor, чтобы получить эти продукты (связанные с компаниями) в шаблоне моего компонента?

Answer 1

Вам нужно вложить *ngFor с. companies является массивом и не имеет свойства products, но company имеет. И обратите внимание, что я переместил первый *ngFor из тега заголовка панели в тег панели.

<mat-expansion-panel *ngFor="let company of companies">

     <mat-expansion-panel-header>
        <mat-panel-title>{{ company.name }}</mat-panel-title>
     </mat-expansion-panel-header>

    <mat-selection-list>
       <mat-list-item *ngFor="let product of company.products">
          {{ product.name }}
       </mat-list-item>
    </mat-selection-list>

</mat-expansion-panel>

Answer 2

Поскольку у каждой компании есть продукты, вы должны перечислить продукты на уровне компании. Ваш HTML-код должен быть вложенным, чтобы при извлечении продуктов у company была область действия.

<mat-expansion-panel *ngFor="let company of companies">

  <mat-expansion-panel-header>
    <mat-panel-title>{{ company.name }}</mat-panel-title>
  </mat-expansion-panel-header>

  <mat-selection-list>
    <mat-list-item *ngFor="let product of company.products">
      {{ product.name }}
    </mat-list-item>
  </mat-selection-list> 

</mat-expansion-panel>

Другой альтернативой этому подходу может быть:

• объединяет продукты в свой список по компаниям.
• Выберите компанию, а затем отобразите продукты выбранной компании

Answer 3

пусть продукт компании. Продукты

EDIT

извините, я не заметил, что второй ngFor не был под внешним ngFor. Я не совсем хорошо разбираюсь в угловых материалах, но я очень быстро посмотрю и дам вам знать, если у меня есть хорошее решение для вас

EDIT

Вы хотите поместить ngFor в панель расширения матов, а не в заголовок панели расширений матов. а потом пусть продукт компании .products