Не меняется отображение компонента angular 8

175

15 августа 2021, 04:00

Здравсвуйте. Не могу понять почему при срабатывании makePushNotification() выполняется функция done() только в блоке else как нужно.

Функция done() меняет внешний вид компонента.

Если быть точнее, параметры компонента меняются (made), но отображение нет, т.е. чекбокс не меняется, текст не зачеркивается.

Но если вручную на чекбокс кликнуть, сначала made изменится на дефолтный, и со второго клика сработает как надо.

Как я понимаю, что то с отображением компонента не то, но не могу понять что конкретно

  <mat-checkbox (change)="done()" [checked]="made">
    <div *ngIf="made">Выполнено</div>
    <div *ngIf="!made">В процессе</div>
  </mat-checkbox>
    <div class="text-wrapper">
      <mat-card-title [ngClass]="{strike: made}">{{task.note}}</mat-card-title>
      <div *ngIf="changeForm">
         <input></input>
      </div>
      <mat-card-content [ngClass]="{strike: made}">{{task.date | date: "medium"}}</mat-card-content>
      <div *ngIf="changeForm">
         <input></input>
      </div>
    </div>


export class TaskCardComponent implements OnInit {
  changeForm = false
  made = false
  done() {
    this.made = !this.made
    if (this.changeForm) {
      this.changeForm = !this.changeForm
    }
  }
  makePushNotification(pushNotifications, task) {
    const eta_ms = new Date(task.date).getTime() - Date.now()
    if (eta_ms > 0) {
      const timeout = setTimeout(() => {
        pushNotifications.create("Test", { body: task.note }).subscribe(
          res => {
            console.log(res)
            this.done()    /* тут не так работает */
          },
          err => console.log(err)
        )
      }, eta_ms)
      timeout
    } else {
      this.done() /* тут срабатывает как надо*/
      console.log(`The task ${task.note} is completed`)
    }
  }

  constructor(
    private pushNotifications: PushNotificationsService
  ) {}
  ngOnInit() {
    this.makePushNotification(this.pushNotifications, this.task)
  }
}

Answer 1

Проблема решена

import { ChangeDetectorRef, ChangeDetectionStrategy } from "@angular/core"
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
...
})
export class TaskCardComponent implements OnInit {
...
constructor(
    ...
    private ref: ChangeDetectorRef
  ) {}
makePushNotification(pushNotifications, task) {
    const eta_ms = new Date(task.date).getTime() - Date.now()
    if (eta_ms > 0) {
      const timeout = setTimeout(() => {
        pushNotifications.create("Test", { body: task.note }).subscribe(
          res => {
            console.log(res)
            this.done()
            this.ref.detectChanges()
            console.log("this", this)
          },
          err => console.log(err)
        )
      }, eta_ms)
      timeout
    } else {
      this.done()
      console.log(`The task ${task.note} is completed`)
    }
  }
}