从数组中删除项目时如何使用 behaviorSubject

Question

我有 angular 8 个申请。

我有两个组成部分，例如 child - parent 关系。所以我从 child 中删除了该项目，但随后该项目在 parent（项目列表）中仍然可见。只有在页面刷新后该项目才从列表中消失。

所以我有这个服务：

export class ItemListService {
 _updateItemChanged = new Subject<any>();
 _removeItemChanged = new BehaviorSubject<any>([]);

  constructor() {}
}

这是 item.ts - child:

openRemoveDialog() {
    const dialogRef = this.dialog.open(ItemRemoveDialogComponent, {
      width: '500px',
      height: '500px',
      data: {
        dossierId: this.dossier.id,
        item: this.item,
        attachments: this.item.attachments
      }
    });

    this.itemListService._removeItemChanged.next(this.item.title);

    dialogRef.afterClosed().subscribe(result => {
      if (result === true) {
        this.router.navigate(['/dossier', this.dossier.id]);

      }
    });
  }

这是 view.ts（项目列表）- parent：所以在这个组件中必须进行刷新



 ngOnInit(): void {
    this.show = !this.router.url.includes('/item/');

    this.itemlistService._updateItemChanged.subscribe(data => {
      const index = this.dossierItems.findIndex(a => a.id === data.id);
      this.dossierItems[index] = data;
    });

    this.itemlistService._removeItemChanged.subscribe(data => {
     // this.dossierItems.pop(); What I have to fill in here?

    });

那么我必须改变什么？

谢谢

这是移除函数：

  remove() {
    this.dossierItemService.deleteDossierItem(this.data.dossierId, this.data.item.id)
      .subscribe(() => {
        this.dialogRef.close(true);
      }, (error) => {
        const processedErrors = this.errorProcessor.process(error);
        this.globalErrors = processedErrors.getGlobalValidationErrors();
    });
  }

我现在是这样的:

remove() {
    this.dossierItemService.deleteDossierItem(this.data.dossierId, this.data.item.id)
      .subscribe(() => {
        this.dialogRef.close(true);
        this.itemListService._removeItemChanged.next(true);
      }, (error) => {
        const processedErrors = this.errorProcessor.process(error);
        this.globalErrors = processedErrors.getGlobalValidationErrors();
    });
  }

并且在 view.ts 中，例如：

 ngOnInit(): void {
  this.itemlistService._removeItemChanged.subscribe(update => update === true ? this.dossierItems : '');
}

但仍然不会刷新列表

Answer 1

您需要为 Angular 创建对数组的新引用才能像这样更新屏幕

this.itemlistService._removeItemChanged.subscribe(data => { 
    // this.dossierItems.pop(); What I have to fill in here?
    this.dossierItems = this.dossierItems.filter(e => e.title !== data);
});

从数组中删除项目时如何使用 behaviorSubject

How to use behaviorSubject when removing item from array

javascript

rxjs

typescript

angular

angular-observable