mat-list可显示多个项目

Question

我有一个包含常量数据的typescript文件，如下：

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

我正在尝试遍历这些内容，并使用mat-List在我的component.html中进行展示。我试图在左边显示图像，名称在该描述下面。对于常量中定义的所有数据，都是这样的。我试了这样，但没有得到任何结果。

<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.ts的文件中有一个名为Helper的类。我在一个名为Helpers.ts的文件中基于Helper类创建了一个名为HELPERS的新常量，并将其导出，创建了一个名为helper的新服务来提供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

也许您想在ngFor中使用的组件ts文件中添加一个名为Helpers的属性：

Helpers: Helper[] = HELPERS;

Answer 2

HTML代码是正确的，但是在您的typescript中，常量助手应该被命名为" HELPERS“。它区分大小写。

另外，不要忘记从appmodule中的@angular/ MatListModule /list导入材料。