角形mat-list mat-list-item数组

Question

在我的角度代码中，我得到了一个数组集合。当我绑定到有角度的html代码时，我将每一列都与mat-list和mat-list-item绑定。例如，我的网格列是按名称。所以我的网格看起来像这样

约翰·乔·玛丽·金·史蒂夫（John Joe Mary Kim Steve） Smith Coe Downs Carn Yeh

如何获取第一列的第一个名称和数组中下一列的下一个名称？

在ts的收藏中，它看起来像

data = [
  {
    firstname: ['John', 'Joe', 'Mary', 'Kim' 'Steve'],
    lastname: ['Smith', 'Coe', 'Downs', 'Carn' 'Yeh']
  }
];

在我的html代码中，我将获得第一列的名字

<div fxLayout="column" fxFlex>
<mat-list>
  <mat-list-item *ngFor="let name of data">
    {{name.firstname}}
  </mat-list-item>
</mat-list> 
</div>
<div fxLayout="column" fxFlex>
<mat-list>
  <mat-list-item *ngFor="let name of data">
    {{name.firstname}}
  </mat-list-item>
</mat-list> 
</div>

我只想获得第一列的名字，并在下一列中获得第二名。

我的错误是我的第一列获取了数组中的所有名称。

谢谢

我在mat-item-list上进行了搜索，但是这些示例并没有提供我正在尝试做的任何线索。

例如，我的网格列是按名称排列的。所以我的网格看起来像这样

约翰·乔·玛丽·金·史蒂夫（John Joe Mary Kim Steve） 史密斯·科恩·唐斯·卡恩 在我的ts系列中，它看起来像

data = [
  { firstname: ['John', 'Joe', 'Mary', 'Kim' 'Steve'],
    lastname: ['Smith', 'Coe', 'Downs', 'Carn' 'Yeh']
  }
]

在我的html代码中，我将获得第一列的名字

<div fxLayout="column" fxFlex>
<mat-list>
  <mat-list-item *ngFor="let name of data">
    {{name.firstname}}
  </mat-list-item>
</mat-list> 
</div>
<div fxLayout="column" fxFlex>
<mat-list>
  <mat-list-item *ngFor="let name of data">
    {{name.firstname}}
  </mat-list-item>
</mat-list> 
</div>

Answer 1

只要弄清楚

    <div fxLayout="column" fxFlex>
    <mat-list>
      <mat-list-item *ngFor="let name of data">
        {{name.firstname[0]}}
      </mat-list-item>
    </mat-list> 
    </div>
    <div fxLayout="column" fxFlex>
    <mat-list>
      <mat-list-item *ngFor="let name of data">
        {{name.firstname[1]}}
      </mat-list-item>
    </mat-list> 
    </div>