Angular 2异步管道不会使用Observable呈现新值

Question

我在我的应用程序中使用NgRx商店。

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

当我编辑数组项时，异步管道不会更新视图，但“数组”对象中的值是正确的（subscribe中的console.log显示更新后的值）。当我单击DOM中的某个位置（打开模式，单击按钮...）时，查看具有新值的更新。

我还登录了子组件“ ngOnChanges”，它不会使用新值触发。

Answer 1

尝试这样的事情：

（请注意，此代码未经测试）。

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

我已从模板中删除了异步管道，并直接分配了数组。通过在 this.zone.run 中执行此操作，将触发摘要周期，并且您的模板将重新渲染。

摘要周期通常仅在一些预定义的情况下触发，例如 Http 方法回调、UI 输入。这些都没有发生在这里，所以 Angular 不知道更新。