Angular视图不更新求助：ResizeObserver内修改绑定变量UI未同步

ResizeObserver是浏览器原生API，它的回调函数运行在Angular的变更检测上下文之外。这意味着你在回调里修改组件属性（比如current_title）时，Angular无法自动检测到这些变化，因此不会更新视图——尽管控制台输出显示变量值已经正确修改。

下面提供两种可靠的解决方案：

方法1：使用NgZone将回调包裹到Angular上下文内 #

NgZone可以帮你将外部代码（如浏览器API回调）拉入Angular的变更检测周期中，确保属性变更能被Angular感知。

修改后的组件代码：

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent {

  constructor(private zone: NgZone) { }

  titles_array: string[] = ["Doctor", "Medic", "Player"];
  current_title: string = "None";
  curr_title_i: number = 0;

  update_title(el: any){
    const resize_ob = new ResizeObserver((entries) => {
      if(entries?.length){
        if(entries[0].contentRect.width === 0){
          // 用zone.run将逻辑包裹进Angular变更检测上下文
          this.zone.run(() => {
            this.current_title = this.titles_array[this.curr_title_i];
            console.log(this.curr_title_i);
            console.log(this.current_title);

            this.curr_title_i++;
            if(this.curr_title_i >= this.titles_array.length){
              this.curr_title_i = 0;
            }
          });
        }
      }
    });

    resize_ob.observe(el);
  }

  ngOnInit(){
    const elemTitleBox = document.querySelector("#home_title_box");
    if(elemTitleBox !== null){
      this.update_title(elemTitleBox);
    }
  }
}

方法2：使用ChangeDetectorRef手动触发变更检测 #

如果不想依赖NgZone，也可以直接手动通知Angular执行变更检测，强制更新视图。

修改后的组件代码：

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

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent {

  constructor(private cdr: ChangeDetectorRef) { }

  titles_array: string[] = ["Doctor", "Medic", "Player"];
  current_title: string = "None";
  curr_title_i: number = 0;

  update_title(el: any){
    const resize_ob = new ResizeObserver((entries) => {
      if(entries?.length){
        if(entries[0].contentRect.width === 0){
          this.current_title = this.titles_array[this.curr_title_i];
          console.log(this.curr_title_i);
          console.log(this.current_title);

          this.curr_title_i++;
          if(this.curr_title_i >= this.titles_array.length){
            this.curr_title_i = 0;
          }
          
          // 手动触发变更检测
          this.cdr.detectChanges();
        }
      }
    });

    resize_ob.observe(el);
  }

  ngOnInit(){
    const elemTitleBox = document.querySelector("#home_title_box");
    if(elemTitleBox !== null){
      this.update_title(elemTitleBox);
    }
  }
}

额外优化：移除冗余的for循环 #

你原代码中的for循环逻辑完全冗余，上面的代码已经帮你简化了这部分，直接按顺序更新索引即可实现相同效果。

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