*ngFor 生成的 div 列表：第一个元素偶尔将其 id 从 1 更改为 "2 或 "3"答案

【问题标题】：*ngFor generated list of divs: first element occasionally changes its id from 1 to "2 or "3"*ngFor 生成的 div 列表：第一个元素偶尔将其 id 从 1 更改为 "2 或 "3"
【发布时间】：2021-12-12 07:22:58
【问题描述】：

我有这个组件：

<div class="list-item-container" *ngFor="let Group of groups; let i=index;">
    <app-groups-list-entry *ngIf="groups.length > 0" [group]="groups[i]"></app-groups-list-entry>   
</div>

如您所见，我将一个 Group 类型的“组”对象传递给子组件，该对象取自数组；该对象有一个 Number 类型的“id”字段。

我的 div 列表已正确创建，实际上我得到以下结果（取自浏览器检查器）：

[
  {
    "id": "2",
    "name": "Famiglia",
    "pic": "https://picsum.photos/100/100",
    "members": [
      1,
      3,
      4,
      5
    ],
    "admin": 1,
    "minApprove": 2,
    "movies": true,
    "shows": false,
    "genres": [
      18,
      36
    ],
    "matches": [
      205,
      63174
    ]
  },
  {
    "id": 2,
    "name": "Bestie",
    "pic": "https://thispersondoesnotexist.com/image",
    "members": [
      1,
      2
    ],
    "admin": 1,
    "minApprove": 2,
    "movies": true,
    "shows": true,
    "genres": [
      18,
      10749
    ],
    "matches": []
  },
  {
    "id": 3,
    "name": "Gnari",
    "pic": "https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGZyaWVuZHN8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80",
    "members": [
      1,
      6,
      7,
      8
    ],
    "admin": 7,
    "minApprove": 3,
    "movies": false,
    "shows": true,
    "genres": [
      10765,
      80
    ],
    "matches": [
      63174
    ]
  }
]

但是，在从一个到另一个来回单击后，它突然将第一项的“id”更改为字符串“2”或“3”（参见第 4 行）：

我意识到这个问题有点含糊，但我真的无法弄清楚它在哪里以及为什么会触发这种变化，所以我希望能得到一些建议，让我朝着正确的方向前进。从数字到字符串的转换特别令人费解，我认为这可能表明问题出在哪里。我当然可以提供更多细节和更多代码。

感谢您的帮助。

【问题讨论】：

app-groups-list-entry 组件对组做了什么。有没有可能让他们变异？您可能还需要在此处使用 trackBy 以确保订购（不确定）。
不，只有accessing their fields 才能在页面上显示它们。我不知道trackBy，我正在研究它。

标签： angular object instance ngfor

【解决方案1】：

从您的代码的语义来看，这样做可能会更好。

<div class="list-item-container" *ngFor="let group of groups;">
    <app-groups-list-entry [group]="group"></app-groups-list-entry>   
</div>

【讨论】：

不幸的是，它仍然会发生。虽然代码更干净，所以还是谢谢你！