typescript - Angular 2 Async-pipe renderar inte nya värden med Observable

Jag använder NgRx Store i min app.

Hem.html

<list-objects
      [array]="array| async"
      (Edit)="Edit($event)"
      (Delete)="Delete($event)"
 ></list-objects>

Home.ts

export class HomePage {
     public array: Observable<itm[]>;

     constructor(){
          this.array= this.store.select(state => state.array);

          this.array.subscribe((a) => {
             console.log(a); //VALUES OK
          }
      }

      Edit(event){
          this.store.dispatch(this.actions.updateItem(event.item));
      }
  }

När jag redigerar ett element i en array uppdaterar inte async-pipen vyn, men värdena i "array"-objekten är korrekta (console.log inne i subscribe visar det uppdaterade värdet). När jag klickar någonstans i DOM (öppnar modal, klickar på knappar...) uppdateras vyn med de nya värdena.

Jag loggar också i barnkomponenten "ngOnChanges" och den utlöses inte med nytt värde.

Svar #1

Prova något liknande detta:

(Observera att denna kod inte är testad).

<list-objects
      [array]="array"
      (Edit)="Edit($event)"
      (Delete)="Delete($event)"
 ></list-objects>

export class HomePage {
     public array: itm[];

     constructor( private zone:NgZone ){
        this.store.select(state => state.array).subscribe((a) => {
              this.zone.run(() => {
                   this.array = a;
              });
          }
      }

      Edit(event){
          this.store.dispatch(this.actions.updateItem(event.item));
      }
  }

Jag har tagit bort async-pipen från mallen och tilldelat arrayen direkt. Genom att göra detta inuti this.zone.run kommer digest-cykeln att triggas och din mall kommer att återrenderas.

Digestcykeln utlöses normalt endast under ett antal fördefinierade omständigheter, t.ex. Http-metodens callback, UI-inmatning. Ingen av dessa inträffar här, så Angular vet inte att den ska uppdatera.

Svar #2

Försök :

constructor(private changeDetector: ChangeDetectorRef) {
              this.array= this.store.select(state => state.array);

              this.array.subscribe((a) => {
                 console.log(a); //VALUES OK
                 this.changeDetector.markForCheck();
              }
          }

Relaterade artiklar