Question

我有一些需要使用ngFor列出的数据，如下所示：

 <ul *ngFor="let dat of data; let i = index">
   <li>{{ dat[i].name }} - {{ i }}</li>
 </ul>

上面的代码的问题在于它仅显示1个项目。

但是我知道这些物品在那里，因为当我这样做时：

  {{ dat[0].name }}

  {{ dat[1].name }}

以上内容为我提供了预期的不同项目，但是当我尝试像这样循环时：

  {{ dat[i].name }}

它只会显示第一个。

我该如何解决？

Answer 1

要使用ngFor进行迭代，无需添加索引。将dat[i].name替换为dat.name

尝试一下：

由于不清楚数据的格式，因此有两种可能性：

对于

 data = [
    { name: "one" },
    { name: "two" }
  ]

 <ul *ngFor="let dat of data; let i = index">
   <li>{{ dat.name }} - {{ i }}</li>
 </ul>

对于

 data = [
    [
      { name: "one" },
      { name: "two" }
    ]
  ]

 <ul *ngFor="let dat of data[0]; let i = index">
   <li>{{ dat.name }} - {{ i }}</li>
 </ul>

Answer 2

从您呈现的内容来看，data是一个1元素的数组，它是dat（data的元素），其长度（因此，data将类似于[[obj1, obj2, obj3]]，而不是[obj1, obj2, obj3]）。因此，您应该像这样遍历data的第0个（也是唯一的）元素：

<ul *ngFor="let dat of data[0]; let i = index">

Answer 3

如果数据是数组，则不需要在可重复元素dat上使用[i]。仅使用dat.name

角度* ng仅显示1个数据项

3 个答案: