如何使用 Angular 在 HTML 中访问没有键名的数组对象

Question

我正在使用 Angular 7 和 Spring boot 5 开发一个网页。

所以，使用服务，我有这个数组数组：

我想将它显示在 html 组件的表格中。 我不知道如何访问每个项目（例如“Estanteria 2”），因为它没有键名。

有没有办法在没有键名的情况下在 html 中访问这些数据？

Answer 1

这将取决于您希望如何在视图中显示它。

你有一个数组数组。 因此，要在 HTML 中显示Estanteria 2 ，类似这样的操作就可以了；

<div *ngFor="let item of array">
  <!-- this will show Estanteria 2 -->
  <div>{{ item[3] }}</div>
</div>

如果你想遍历第二个数组中的所有值，你可以：

<div *ngFor="let item of array">
  <!-- this will show all the values in the second array -->
  <div *ngFor="let value of item">{{ value }}</div>
</div>

Answer 2

将数据加载到变量itemList

 <div *ngFor="let item of itemList; let i = index;" >
    <div *ngFor=" let x of item" >{{ x}}</div>
 </div>

Answer 3

尝试如下，组件

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  items = [[1,2,3], [4,5,6]];
}

HTML

<table>
  <tr *ngFor="let item of items">
    <td *ngFor="let element of item | keyvalue">{{element.value}}</td>
  </tr>
</table>