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

Posted 2023-03-13

【中文标题】如何使用 Angular 在 HTML 中访问没有键名的数组对象

【英文标题】：How to access Array Object without key name in HTML with Angular

【发布时间】：2020-03-27 01:29:23

【问题描述】：

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

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

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

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

【问题讨论】：

按键是指索引？ “Estanteria 2”是数组索引 3 处的值。只需迭代它并获取每个索引的值

我建议您在服务级别处理数据并只交付给组件有用的数据。这样可以避免模板中出现此类问题。

【参考方案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>

【参考方案2】：

尝试如下， 组件

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

【参考方案3】：

将数据加载到变量itemList

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