时间戳

首页 > 解决方案 > 如何使用 *ngfor 读取和显示数组数组？

arrays - 如何使用 *ngfor 读取和显示数组数组？

问题描述

我有这个数组数组：

    (2) [Array(1), Array(2)]
    0: Array(1)
    0: {rank: "", role: "", summonerName: "adeus"}
    1: Array(2)
    0: {rank: "", role: "", summonerName: "olaaaaa"}
    1: {rank: "", role: "", summonerName: "olaaaaaaa"}

我正在使用带有 div 的简单 *ngfor 来显示数组的内容。但问题是我只知道如何显示数组内部的项目，而不知道数组内部的数组。

所以要获得召唤师的名字，我不知道该怎么做，因为：

    <div *ngFor="let ola of test">
    
      <p> {{ola.summonerName}}</p>
    
    </div>

没有得到带有召唤者名字的数组，它得到了之前的。

标签： arraysangularngfor

解决方案

您将需要使用嵌套的 *ngFor 和 ngContainer ：

<ng-container *ngFor="let arrays of test>
<div *ngFor="let ola of arrays ">

  <p> {{ola.summonerName}}</p>

</div>
</ng-container>

为什么<ng-container>？因为您不能在一个 html 标记上应用多个 *ngFor/*ngIf。

ng-container 是一个 Angular 组件，它不会创建任何 DOM 元素，但它仍会显示您的 div 并应用 ngFor（不会在您的页面上添加更多 HTML）。

推荐阅读