Prime ng table 未在第一次更改时更新

Question

我有一个 prime-ng table 商店，我可以在列表中删除和添加商店。

行为： 添加商店时，ChildComponent 向 ParentComponent 发出事件，然后将商店添加到列表并更新输入 ChildComponent 的 observable 以便商店不再出现在 table.

问题： 以上行为正常，除非 table 被过滤，然后在添加商店时 table 不会更新，即使我可以看到 table 数组已在组件中正确更新。但是，当添加另一家商店时（在同一个过滤 table 中）它工作正常，然后这两家商店都从 table.

中删除

table 是纯组件（子）的一部分：


export class ChildComponent implements OnInit {
  @Input() shops$: BehaviorSubject<Shop[]>
  @Output() addSelectedShops = new EventEmitter<Shop[]>()
  shops: Shop[]
  selectedShops: Shop[] = []

  constructor() {}

  ngOnInit(): void {
     this.shops$.subscribe((data) => {
          this.shops = data
        })
  }

 // this is called when adding a new shop
  onAddSelectedShops(): void {
    this.addSelectedShops.emit(this.selectedShops)
    this.selectedShops = []
  }
}

update方法的父组件：


export class ParentComponent implements OnInit {
  shops$: BehaviorSubject<Shop[]>
  localShops: Shop[]
  list: Shop[]

  constructor() {}

  ngOnInit(): void {
   // localShops is initiated here
}

// this is called via the event emitter
  addShopToList(shop: Shop): void {
    this.list.push(shop)
    const shopIndex = this.localShops.findIndex(...)
    if (shopIndex > -1) {
      this.localShops.splice(shopIndex, 1)
    }
    this.shops$.next(this.localShops)
  }
}

这是子组件中的table：

 <p-table #dt1 [value]="shops" [(selection)]="selectedShops" [globalFilterFields]="['resellerName']" dataKey="uniqueResellerName">
   <ng-template pTemplate="caption">
      <span>
         <i class="candidate-shop-list__search-bar-icon pi pi-search"></i>
         <input pInputText type="text" (input)="dt1.filterGlobal($any($event.target).value, 'contains')"                               placeholder="Search" />
      </span>
   </ng-template>
   <ng-template pTemplate="header">
                    ..... HEADERS ....
   </ng-template>
   <ng-template pTemplate="body" let-rowIndex="rowIndex" let-shop>
                 ..... DATA  ....
   </ng-template>
</p-table>

如果有任何关于为什么这在第一次添加时不起作用的想法，请告诉我。谢谢。

Answer 1

我遵循了 this question 中的答案，它对我有用，但我仍然不完全理解为什么它在第一次添加时不起作用，然后在之前的下一个添加中起作用。

Answer 2

我使用以下代码的任何方式临时 solution.Hope 这将在功能更新中解决。

将其用作 table 的 ngIf //ngif 可见：布尔值=真；

将其放入您的按钮点击操作中

this.visible = 假； setTimeout(() => this.visible = true, 0);

Prime ng table 未在第一次更改时更新

Prime ng table not updating on first change

primeng

angular

p-table