Angular中子组件通过ngModel更新对象数组的实现方案咨询

问题根源 #

你遇到的核心问题是基本类型的输入传递是值拷贝：组件C接收的column、operator等都是字符串（基本类型），子组件修改的只是自己的本地副本，完全不会影响组件A中TreeDataStructure实例里的原对象。

解决方案一：直接传递Filter对象（最简洁高效） #

因为Filter是引用类型，传递对象时子组件拿到的是原对象的引用，修改对象属性会直接同步到父组件的数据源。

1. 修改组件C的输入定义 #

把分散的单个属性输入改成接收整个Filter对象：

// 组件C
export class ComponentC {
    @Input() filter: Filter;
}

2. 调整组件C的模板绑定 #

直接绑定到filter对象的属性：

<!-- 组件C模板 -->
<input [(ngModel)]="filter.column"/>
<input [(ngModel)]="filter.operator"/>
<input [(ngModel)]="filter.comparaisonValue"/>

3. 优化组件B的模板传递逻辑 #

循环时直接把item（单个Filter对象）传给组件C，无需通过索引拆分属性：

<!-- 组件B模板 -->
<ng-container *ngFor="let item of filters.items">
    <component-c [filter]="item"></component-c>
</ng-container>

这样修改后，组件C中对过滤器属性的修改会直接同步到组件A的TreeDataStructure实例里，因为操作的是同一个引用对象。

解决方案二：使用输出事件（更严谨的单向数据流） #

如果想严格遵循Angular单向数据流原则，不让子组件直接修改父组件对象，可以通过输出事件通知父组件更新数据：

1. 组件C添加输入和输出事件 #

// 组件C
export class ComponentC {
    @Input() column: string;
    @Input() operator: string;
    @Input() comparaisonValue: string;

    @Output() filterChanged = new EventEmitter<Filter>();

    onColumnChange(value: string) {
        this.column = value;
        this.emitChange();
    }

    onOperatorChange(value: string) {
        this.operator = value;
        this.emitChange();
    }

    onValueChange(value: string) {
        this.comparaisonValue = value;
        this.emitChange();
    }

    private emitChange() {
        this.filterChanged.emit({
            column: this.column,
            operator: this.operator,
            comparaisonValue: this.comparaisonValue
        });
    }
}

2. 组件C模板绑定事件 #

<!-- 组件C模板 -->
<input [(ngModel)]="column" (ngModelChange)="onColumnChange($event)"/>
<input [(ngModel)]="operator" (ngModelChange)="onOperatorChange($event)"/>
<input [(ngModel)]="comparaisonValue" (ngModelChange)="onValueChange($event)"/>

3. 组件B监听事件并更新原数组 #

<!-- 组件B模板 -->
<ng-container *ngFor="let item of filters.items; let index = index">
    <component-c
        [column]="item.column"
        [operator]="item.operator"
        [comparaisonValue]="item.comparaisonValue"
        (filterChanged)="updateFilter(index, $event)"
    >
    </component-c>
</ng-container>

// 组件B
export class ComponentB {
    @Input() filters: Filters;

    updateFilter(index: number, newFilter: Filter) {
        Object.assign(this.filters.items[index], newFilter);
    }
}

额外注意事项 #

• 确保TreeDataStructure和filters在组件A中被正确初始化，避免undefined导致的报错：

  // 组件A
  export class ComponentA {
      tree: DataTreeStructure = new DataTreeStructure();
  
      constructor() {
          this.tree.filters = {
              items: [],
              linkOperator: 'and' // 初始化默认值
          };
      }
  }
  

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