Значение Angular 8 не будет обновляться при просмотре после изменения

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>

Если я регистрирую значение 'status' в компоненте. Я получаю новое значение "истина", но оно не изменится в представлении, пока я не сфокусирую курсор на вводе, а затем щелкну где-нибудь за его пределами.

Почему так происходит? как я могу это решить?

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);
 }
}

РЕДАКТИРОВАТЬ: он обновляется при вашем следующем взаимодействии с пользовательским интерфейсом, потому что angular запускает обнаружение изменений в этот момент времени, улавливает изменения в вашем компоненте и обновляет пользовательский интерфейс. Если вы делаете что-то асинхронно (если вы не используете angular API, например HttpService), вам нужно сообщить ChangeDetector, что есть изменения, вручную.