Angular mat-list mat-list-item数组

问题描述 投票:0回答:1

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

John Joe Mary Kim Steve Smith Coe Downs Carn Yeh

How can I get the 1st name for the first column and the next name in the array for the next column?

在我收集的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>
arrays angular
1个回答
0
投票

刚想通了

    <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>
© www.soinside.com 2019 - 2024. All rights reserved.