Angular 8 值在更改后不会在视图上更新

Posted 2023-02-19

【中文标题】Angular 8 值在更改后不会在视图上更新

【英文标题】：Angular 8 value won't update on view after change

【发布时间】：2020-01-11 16:49:48

【问题描述】：

我在 Angular 中有一个小组件，它有一个（目前）设置超时并更改变量值的方法。

import  Component, ChangeDetectionStrategy  from '@angular/core';

@Component(
  selector: 'my-component',
  templateUrl: './my-view.html',
  styleUrls: ['./my-view.scss'],
  changeDetection: ChangeDetectionStrategy.Default
)
export class MyComponent 

  status: boolean = false;

  changeStatus(): void 

    setTimeout(() => 
      this.status = true;
    , 1500);
  

还有 HTML

<div>
  <form #myForm="ngForm">
    <input name="code" type="text" class="form-control" [(ngModel)]="code" #codeInput="ngModel" required placeholder="Enter your code" />
  </form>
</div>

<div class="row">
  <div class="col-md-5" (click)="changeStatus()">
    <mat-icon aria-label="clear-all" *ngIf="!status">&#xe042;</mat-icon>
    <a>Change status</a>
  </div>
  <div class="col-md-7">
    <button type="button" class="btn-flat app-btn-flat">Cancel</button>
    <button type="button" class="btn app-btn" [disabled]="myForm.invalid || myForm.pristine">Save</button>
  </div>
</div>

如果我在组件中记录“状态”的值。我得到了 'true' 的新值，但它不会在视图上改变，除非我将光标聚焦在输入上，然后单击它之外的任何地方。

为什么会这样？我该如何解决？

【参考方案1】：

您是在正常的变更检测周期之外进行的。这将起作用：

export class MyComponent 

  status: boolean = false;

  constructor(private _cdr: ChangeDetectorRef)  

  changeStatus(): void 

  setTimeout(() => 
    this.status = true;
    this._cdr.detectChanges()
  , 1500);
 

编辑：它会在您与 UI 的下一次交互时更新，因为 Angular 正在运行它在那个时间点进行更改检测，它会捕获组件中的更改并更新 UI。如果您正在异步执行操作（除非您使用 Angular API，例如 HttpService），那么您必须手动告诉 ChangeDetector 有更改。

【讨论】：

我认为你不需要 this._cdr.detectChanges() 因为 setTimeout 已经进行了角度运行变化检测

【参考方案2】：

为什么会这样？

您在祖先组件之一中将changeDetection 设置为OnPush。该属性不能被覆盖。参考：https://angular.io/api/core/ChangeDetectionStrategy

我该如何解决？

在祖先组件中取消设置changeDetection，或手动检测Adam 的答案等变化。

constructor(private _cdr: ChangeDetectorRef) 

changeStatus(): void 
  setTimeout(() => 
    this.status = true;
    this._cdr.detectChanges()
  , 1500);