Angular mat-list mat-list-item数组

Question

在我的angular代码中，我得到了一个数组集合。当我绑定到angular html代码时，我使用mat-list和mat-list-item逐列绑定。例如，我的网格列是按名称排列的。因此，我的网格将如下所示

John Joe Mary Kim Steve Smith Coe Downs 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>

我只想得到第一列的名字和下一列的第二个名字。

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

谢谢

我在google上搜索了mat-item-list，但是示例并没有给出任何关于我想要做什么的线索。

例如，我的网格列是按名称排列的。因此，我的网格将如下所示

约翰·乔·玛丽·金·史蒂夫·史密斯·唐·卡恩·叶在我的收藏中，它看起来像是

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>