Início / coding / Perguntas / 77657143
Accepted
Ole
Asked: 2023-12-14 08:02:57 +0800 CST

Mudança de estado não detectada ao usar OnPush Change Detection?

  • 772

Tentando descobrir por que OnPusha estratégia de detecção de alterações não está funcionando nesta demonstração .

Se bem entendi, OnPusha detecção de alterações deve ser acionada quando uma referência de propriedade é alterada. e para garantir isso, um novo array é definido sempre assim:

    this.periodData$.subscribe((pd) => {
      this.periodData = [...pd];
    });

E o modelo que é renderizado periodDatafica assim:

<div *ngFor="let p of periodData">{{p}}</div>

O periodDataé alterado através do controle de seleção na demonstração.

Podemos ver que está mudando via log, porém o template não está atualizando. Se a detecção de alterações estiver definida como padrão, ela funcionará.

Pensamentos?

javascript

2 respostas

  1. Best Answer

    Use ChangeDetectorRefpara acionar manualmente a detecção de alterações após a atualização periodData.

    import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
  ChangeDetectorRef,
} from '@angular/core';
import { AsyncPipe, NgFor } from '@angular/common';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-detect',
  imports: [NgFor, AsyncPipe],
  standalone: true,
  template: `
 <div *ngFor="let p of periodData">{{p}}</div>
  `,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DetectComponent implements OnInit {
  @Input()
  periodData$!: Observable<any[]>;
  periodData: any[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.periodData$.subscribe((pd) => {
      console.log(`Period Data is ${JSON.stringify(pd)}`);
      this.periodData = [...pd];
      this.cdr.detectChanges();
    });
  }
}
    • 1

  2. Ah - OK - encontrei a resposta aqui . Resumidamente:

    As alterações de objeto não são acionadas na detecção de alterações push, o que só é válido para entradas de componentes.

    • 0

relate perguntas