Question

我在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'的新值，但是除非将光标放在输入上，然后单击它之外的任何地方，否则它不会在视图上改变。

为什么会这样？我该怎么解决？

Answer 1

为什么会这样？

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

我该如何解决？

在祖先组件中取消changeDetection的设置，或手动检测亚当的答案之类的变化。

constructor(private _cdr: ChangeDetectorRef) {}

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

Answer 2

您正在正常变化检测周期之外执行此操作。这将起作用：

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手动进行了更改。

更改后角度8值将不会在视图上更新

2 个答案: