Question

当使用可见属性为false更新项目时，这些项目必须隐藏。并且当visible属性变为true时，该项目必须出现。

但是，不，当我将某些属性的可见性更改为false时，项将隐藏，但是当我更改为true时，项不会出现。但是他们在唐。代码有什么错误？

 // Parent.ts 


   export class Parent {
  items$: Observable<Item[]>;
  items: Item[];

this.items$ = this.store.select(state => state.items);
this.items$.subscribe(
  items => {
    if (items.length > 0) {
      this.items = items.filter(x => x.visible === true);

    }
  },
  error => {
    console.log('error', error);
  }
);
}


// Parent.html 

  < div * ngFor="let item of items" >
    <child[data]="item" > </child>
      < /div>

// child.ts 

export class child {
  @Input()
  data: Item;

  name: string;


  constructor(
    private store: Store<AppState>,
    private state: State<AppState>,
  ) { }

  ngOnInit() {
    this.name = this.data.name;
  }

  ngOnChanges(changes: SimpleChanges) {
    // only run when property "data" changed
    console.log("called");
    if (changes['viewport']) {
      this.canvasId = 'canvas' + this.viewport.id;
    }
  }

}

Answer 1

使用ngrx时，我尝试使用可观察对象和异步管道来更新UI。

尝试

this.items$ = this.store.pipe(
    select(state => state.items),
    map(i => i.filter(x => x.visible)),
);

在html

中

<div *ngFor="let item of items$ | async">

商店更新后子组件未更新

1 个答案: