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

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

0 голосов
/ 16 июня 2020

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

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

Я пытаюсь перебрать это содержимое и продемонстрировать его в моем компоненте. 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>

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

Ответы [ 2 ]

1 голос
/ 16 июня 2020

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

Helpers: Helper[] = HELPERS;
0 голосов
/ 16 июня 2020

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

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

...