0

我有一个包含常量数据的打字稿文件，如下所示：

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 的新服务，提供 helpers 的详细信息。如果我尝试这种方式，我可以获取单人数据的数据：

<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>

这里的问题是循环，我无法正确获得。

4

2 回答 2

1

也许您想添加一个Helpers在组件 ts 文件中命名的属性，该属性用于ngFor：

Helpers: Helper[] = HELPERS;
于 2020-06-16T17:58:27.197 回答
0

HTML 代码是正确的，但在您的打字稿中，常量 HELPERS 应命名为“Helpers”。它区分大小写。

也不要忘记从你的 appmodule 中的 @angular/material/list 导入 MatListModule。

于 2020-06-16T17:42:31.733 回答