mat-list для отображения нескольких элементов

Question

У меня есть файл машинописного текста, содержащий постоянные данные, как показано ниже:

export const HELPERS: Helper[] = 
[
    {
      id: '0',
      name: 'Joan',
      image: '/assets/images/img.png',
      designation: 'Chief',
      abbr: 'TO',      
      description: 'testing data'
    }, 
// few more items
];

Я пытаюсь перебрать это содержимое и продемонстрировать его в своем component.html, используя mat-List. Я пытаюсь показать изображение слева, имя под этим описанием. Подобно этому для всех данных, определенных в константе. Я пробовал вот так, но результата не добился.

<div fxFlex>
    <h2>Helpers</h2>
    <mat-card *ngIf="helper" fxFlex></mat-card>
    <mat-list>     
      <mat-list-item *ngFor="let helper of Helpers">
        <img matListAvatar src="{{helper.image}} " alt="...">
        <h3 matLine> {{helper.name}} </h3>
        <p matLine>
          <span> {{helper.abbr}} </span>
          <span class="demo-2"> -- {{helper.description}} </span>
        </p>
      </mat-list-item> 
     </mat-list>
  </div>

Как в опции mat-List показать данные друг под другом?

Update1: у меня есть класс Helper в файле helper.ts. Я создал новую константу под названием HELPERS на основе класса Helper в файле с именем Helpers.ts и экспортировал ее. Создайте новую службу с именем helper, которая предоставляет подробную информацию о помощниках. Я могу получить данные для одного человека, если попробую таким образом:

<mat-card *ngIf="helper" fxFlex>
  <mat-card-header>
    <div mat-card-avatar></div>
    <mat-card-title>
      <h3>{{helper.name | uppercase}}</h3>
    </mat-card-title>
  </mat-card-header> 
</mat-card>

Проблема здесь в зацикливании, которое я не могу правильно понять.

Answer 1

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

Helpers: Helper[] = HELPERS;

Answer 2

HTML-код правильный, но в вашем машинописном тексте константа HELPERS должна называться "Helpers". Это чувствительно к регистру.

Также не забудьте импортировать MatListModule из @angular/material/list в свой модуль приложения.