Angular+TypeScript中修改函数参数传入的@Input变量未触发视图更新

问题原因及解决方案 #

核心原因排查方向 #

• 首先确认引用一致性：在你修改model属性的位置加一行打印console.log(model === this.category)，如果输出为false，说明你在setInterval回调中拿到的model已经不是当前组件最新的@Input() category的引用：
  你的setInterval间隔有8秒，这期间如果父组件重新给传入的category赋值了新的对象实例，checkMedia函数里捕获的还是最初传入的旧引用，修改旧引用的属性自然不会同步到组件最新的category变量上。浏览器控制台打印对象时是懒加载的，展开时才读取当前值，所以会出现打印看起来一致、实际上引用不同的错觉，可以用console.log(JSON.parse(JSON.stringify(model)))打印快照确认实际值。
• 变更检测策略适配问题：如果你的组件启用了ChangeDetectionStrategy.OnPush策略，Angular默认只会在@Input的引用发生变化、组件内部触发DOM事件时自动更新视图，你修改对象内部属性不会触发自动更新。
  你直接修改this.category.name时刚好命中了Angular的自动变更检测周期，所以更新生效；但通过setInterval内的异步回调修改model属性时，异步操作脱离了默认的变更检测触发时机，即便调用了detectChanges也可能因为组件没有被标记为需要更新而失效。

修复方案 #

1. 如果是引用不一致问题：不要依赖最初传入的model参数，直接操作组件实例的this.category变量即可，或者每次修改前重新对齐引用。
2. 如果是OnPush策略问题：
   • 修改属性后同时调用this.cd.markForCheck()，标记组件及其父链需要在下一次变更检测周期更新
   • 或者直接替换@Input的整个引用，触发自动变更检测：

     this.category = {
       ...this.category,
       hasMedia: newModel.hasMedia,
       images: newModel.images,
       uploading: false
     }
     

3. 如果异步操作脱离了NgZone管辖：将修改逻辑包裹在NgZone的run回调中，确保变更检测能正常捕获更新：

   // 先在构造函数注入NgZone
   constructor(private ngZone: NgZone) {}
   
   // 修改属性时
   this.ngZone.run(() => {
     model.hasMedia = newModel.hasMedia;
     model.images = newModel.images;
     model.uploading = false;
     this.cd.detectChanges();
   })
   

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