Angular如何手动触发绑定？Angular Material 5视图不更新问题咨询

嘿，这个问题我之前也碰到过，咱们一步步来分析：

首先，你的逻辑本身是没问题的——找到对应索引、替换数组元素的操作完全正确。视图没同步更新的核心原因是Angular的变更检测机制：Angular默认通过检测数据的引用变化来触发视图更新，而你直接修改数组中元素的操作，并没有改变this.contractors数组本身的引用，所以Angular可能没察觉到数据已经更新。

下面给你几个可行的解决方案，按推荐程度排序：

1. 生成数组的新引用（最推荐） #

直接创建一个新的数组替换原数组，让Angular明确感知到数据变化。你可以用扩展运算符或者slice方法来实现：

dialogRef.afterClosed().subscribe( (contractor: ContractorModel) => {
  if (contractor !== null) {
    // 用扩展运算符生成新数组
    this.contractors = [
      ...this.contractors.slice(0, index),
      contractor,
      ...this.contractors.slice(index + 1)
    ];
  }
});

这种方式符合Angular变更检测的设计思路，不需要额外依赖，代码也清晰直观。

2. 手动触发变更检测 #

如果不想改变数组的引用，可以通过ChangeDetectorRef手动通知Angular检查变更：
首先在组件的构造函数中注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef: ChangeDetectorRef) {}

然后在更新数组元素后调用检测方法：

dialogRef.afterClosed().subscribe( (contractor: ContractorModel) => {
  if (contractor !== null) {
    this.contractors[index] = contractor;
    // 手动触发变更检测
    this.cdRef.detectChanges();
    // 若组件用了OnPush变更检测策略，推荐用markForCheck()
    // this.cdRef.markForCheck();
  }
});

markForCheck()会标记组件及其父组件需要在下一次变更检测周期中被检查，更适合使用OnPush策略的场景。

3. 额外验证：对话框的数据传递逻辑 #

顺便提一句：你传递给对话框的data: { contractor : this.contractors[index] }是对象的引用，如果子组件直接修改了这个对象的属性，其实父组件的数组元素已经被修改了；但如果子组件返回的是一个全新的ContractorModel对象，那你现在替换元素的操作就是必要的——你的代码这里处理是对的，不用调整。

总结一下：不是你的逻辑错误，而是Angular的变更检测没捕捉到数组元素的修改，用上面的方法就能解决视图不更新的问题啦～

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