Ionic4+Angular用*ngFor动态生成ion-select出现意外联动如何解决

问题根因 #

你遇到的UI显示和实际存储数据不一致、多个选择器意外联动的问题，是Angular *ngFor默认的节点跟踪策略导致的：
默认*ngFor会通过元素本身的值判断是否需要复用DOM节点，你初始化的数组是三个相同的基础类型字符串['Y','Y','Y']，Angular会认为这三个ion-select对应的是同一个可复用节点，修改其中一个的取值时，就会错误同步所有同值节点的UI。

修复方案 #

方案1：添加trackBy跟踪函数（无需改动现有数据结构，推荐） #

1. 修改mypage.page.html中的*ngFor声明，新增trackBy配置：

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

2. 在mypage.page.ts中添加对应的跟踪函数：

trackByIndex(index: number, item: any): number {
  return index;
}

这个函数会强制Angular按照数组下标跟踪节点身份，无论元素值是否相同，每个下标对应的DOM节点都是独立的，即可解决联动问题。

方案2：修改数组元素为对象类型（适合后续需要扩展字段的场景） #

如果后续需要给每个选项存储更多关联属性，可以把字符串数组改为对象数组，利用对象的引用特性实现节点区分：

1. 修改mypage.page.ts中的数组初始化逻辑：

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

2. 修改mypage.page.html中的绑定逻辑：

<ion-select
  [(ngModel)]="myObject.array[i].value"
  (ionChange)="change($event, i)"
  okText="Set" 
  cancelText="Throw away"
>

内容的提问来源于stack exchange，提问作者Jakub Szlaur