Question

我遇到一个奇怪的问题，我有一个click事件，更新了一个值，我看到它在控制台中正在更新，但HTML不变。

TS

toggleTooltip = false;

displayTooltipMessage(flag: boolean) {
    console.log(flag); // Value passed
    this.toggleTooltip = flag;
    console.log(this.toggleTooltip); // updated value
}

HTML

 <button (click)="displayTooltipMessage(true)">Press me</button>

 {{toggleTooltip}}

我在控制台和服务器上都没有看到任何错误

我关闭/打开浏览器，清除缓存，重新启动服务器，清除IDE等都没有帮助

更新：

<div class="table-responsive">
      <app-button></app-button> /* WORKING HERE */
      <div
        *ngFor="let obj of ListOfObj"
        class="lookup-cards"
      >
        <ng-container *ngFor="let col oftTableColumns">
      <app-button></app-button> /* NOT WORKING HERE */
        {{ obj[col.field] }}
      </ng-container>
      </div>
</div>

Answer 1

尝试使用一个对象而不是原始对象。我注意到angular的绑定不适用于基本体。

TS

toggleTooltip:any = {value:false};

displayTooltipMessage(flag: boolean) {
    console.log(flag); // Value passes
    this.toggleTooltip.value = flag;
    console.log(this.toggleTooltip); // udpated value
}

HTML

<button (click)="displayTooltipMessage(true)">Press me</button>

 {{toggleTooltip.value}}

Answer 2

我认为这不会解决问题，但是请尝试为您的变量定义类型：

toggleTooltip: boolean = false

并确保这些代码行在导出的组件内。

Answer 3

我认为您需要在代码中更改变量的地方使用NgZone。

constructor(private ngZone: NgZone){}

this.ngZone.run(() => {
     this.loadData();
 });

这类似于Triggering change detection manually in Angular

数据绑定不会更新值Angular

3 个答案: