Angular中*ngFor循环组件下拉框同步变更问题求助

你遇到的问题核心是对象引用共享：orderTrackings数组里的每个元素都是同一个对象的副本（本质是共享同一个内存引用），所以当子组件修改绑定的对象属性时，所有指向该引用的组件都会同步看到变化。

方法1：初始化数组时做深拷贝 #

在获取或生成orderTrackings数据的时候，给每个对象做深拷贝，确保每个元素都是独立的对象实例。

简单场景用JSON序列化/反序列化 #

如果你的对象没有特殊类型（比如函数、Date、RegExp等），可以用JSON.parse(JSON.stringify())快速实现深拷贝：

// 假设你从接口拿到原始数据rawData
this.orderTrackings = rawData.map(item => JSON.parse(JSON.stringify(item)));

复杂场景用专业深拷贝工具 #

如果对象包含特殊类型，JSON方法会丢失这些类型信息，推荐用lodash的cloneDeep方法：

1. 先安装lodash：

npm install lodash

2. 在组件中导入并使用：

import cloneDeep from 'lodash/cloneDeep';

// ...
this.orderTrackings = rawData.map(item => cloneDeep(item));

方法2：子组件内部创建局部副本 #

如果不想修改父组件的orderTrackings数组，可以在technical-destinations组件内部，把传入的orderTracking复制一份作为局部状态使用，避免直接修改原对象引用。

代码示例：

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

@Component({
  selector: 'technical-destinations',
  template: `
    <select [(ngModel)]="localOrderTracking.selectedDestination" (change)="onDropdownChange()">
      <option *ngFor="let dest of groupDestinations" [value]="dest.id">{{dest.name}}</option>
    </select>
  `
})
export class TechnicalDestinationsComponent implements OnInit {
  @Input() orderTracking: any;
  @Input() groupDestinations: any[];
  @Output() trackingUpdated = new EventEmitter<any>();
  
  localOrderTracking: any;

  ngOnInit() {
    // 深拷贝传入的对象到局部变量
    this.localOrderTracking = JSON.parse(JSON.stringify(this.orderTracking));
  }

  // 监听父组件传入值的变化，同步更新局部副本
  ngOnChanges(changes: any) {
    if (changes.orderTracking && !changes.orderTracking.firstChange) {
      this.localOrderTracking = JSON.parse(JSON.stringify(changes.orderTracking.currentValue));
    }
  }

  // 当下拉框变化时，把更新后的数据同步回父组件
  onDropdownChange() {
    this.trackingUpdated.emit(this.localOrderTracking);
  }
}

然后在父组件模板中监听事件更新原数组：

<div class="ui-g" *ngFor="let orderTracking of orderTrackings; let i=index" (click)="selectItemForRequest(i)" [ngClass]="{'active' : selectedOrderTracking===i }"> 
  <technical-destinations 
    *ngIf="orderTrackings.length" 
    class="technical_destinations {{i}}" 
    [orderTracking]="orderTracking" 
    [groupDestinations]="groupDestinations"
    (trackingUpdated)="updateOrderTracking(i, $event)"
  ></technical-destinations> 
</div>

父组件的updateOrderTracking方法：

updateOrderTracking(index: number, updatedTracking: any) {
  this.orderTrackings[index] = updatedTracking;
}

方法3：用工厂函数创建独立对象 #

如果orderTrackings是你手动生成的数组，可以用工厂函数每次创建新对象，从根源避免引用复用：

// 定义工厂函数，每次调用返回新对象
function createOrderTracking(baseData: { id: number, destination: string }) {
  return {
    id: baseData.id,
    destination: baseData.destination,
    selectedDestination: '',
    // 其他需要的属性
  };
}

// 生成数组时使用工厂函数
const initialData = [{id:1, destination:'A'}, {id:2, destination:'B'}];
this.orderTrackings = initialData.map(item => createOrderTracking(item));

不管用哪种方法，核心都是打破对象引用的共享，让orderTrackings数组里的每个元素都持有独立的对象实例，这样子组件修改各自绑定的对象时，就不会影响其他组件了。

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