Ionic4 + Angular：使用 *ngFor 动态创建 ion-select 导致将所有 ion-select-选项链接在一起（无意中）

Question

我需要根据名为 myObject.array 的对象中的数组创建 ion-select 的列表。

• 当我使用 mypage.page.ts 和 mypage.page.html 创建列表时 下面列出的代码。我所有 ion-select-options 都 link 在一起 - 所以当我将一个 ion-select 更改为 Y 时，所有 ion-select 更改为 Y等
• 我可以在控制台日志中看到 ionChange 只启动了一次 - 啤酒里面我也可以看到正确的数据（里面只有一个项目 myObject.array 已更改）。
• 问题是 UI 与 mypage.page.ts
中的数据不对应

下图是我只改了一个ion-select和console log后的UI（可以看到改了多个ion-select，console log数据和UI):

如何从数组中动态创建 ion-selects 而不是彼此 link 它们？

编辑：

• 控制台中的错误与 cookie 有关（此错误消息：Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute）。
• 这些错误与我的代码无关，因为无论我添加还是删除页面，它们仍然存在。

我的代码：

<ion-header>
  <ion-toolbar>
    <ion-title>mypage</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item *ngFor="let output of myObject.array;let i=index;">
    <ion-label> Array object {{i}}</ion-label>
      <ion-select
      [(ngModel)]="myObject.array[i]"
      (ionChange)="change($event, i)"
      okText="Set" cancelText="Throw away">
        <ion-select-option value="Y"> Yes? </ion-select-option>
        <ion-select-option value="N"> No? </ion-select-option>
      </ion-select>
  </ion-item>
</ion-content>

还有这个 mypage.page.ts 代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mypage',
  templateUrl: './mypage.page.html',
  styleUrls: ['./mypage.page.scss'],
})
export class MypagePage implements OnInit {

  myObject = {array: ['Y','Y','Y']};

  constructor() {
  }

  ngOnInit() {
  }

  change(event, i){
    console.log(event);
    console.log(i);
    console.log(this.myObject);
  }

Answer 1

trackBy 是为了提高变化检测性能而制作的。

仅作记录，下面是如何使其成为“trackBy”索引：

模板更改

<ion-item *ngFor="let output of myObject.array; let i=index; trackBy:indexTracker;">

控制器更换

indexTracker(index: number, value: any) {
    return index;
}