Prime ng table not updating on first change

Question

I have a prime-ng table of shops, where I can remove and add shops to a list.

The behavior: When a shop is added, the ChildComponent emits an event to ParentComponent which then adds the shop to the list and updates the input observable of the ChildComponent so that the shop no longer appears in the table.

The issue: The above behavior works fine except when the table is filtered, then when adding a shop the table is not updated even though I can see that the table array has been updated correctly in the component. However, when another shop is added (in the same filtered table) it works fine, and then both shops are removed from the table.

The table is part of a pure component (child):


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 = []
  }
}

The parent component with the update method:


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

This is the table in the childComponent:

 <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>

Please let me know if there is any idea on why this is not working on the first addition. Thank you.

Something is odd, in ParentComponent.addShopToList, you are using const shopIndex = this.shops.findIndex(...). But this.shops is not defined. Have you checked the CRUD example from the documentation ? https://primefaces.org/primeng/showcase/#/table/crud There example works fine for the 1st addition when the table is already filtered. — Pilpo, Jun 07 '21 at 15:24
Sorry for the confusion, this.shops is defined in onInit, I just forgot to add it. will update the code — Lossan, Jun 07 '21 at 15:28

score 0 · Accepted Answer · answered Jun 08 '21 at 11:21

0

I followed the answer in this question and it worked for me, but I still don't fully understand why it didn't work on first addition then it worked on the next ones previously.

answered Jun 08 '21 at 11:21

Lossan

411
1
8
16

score 0 · Answer 2 · answered Mar 09 '22 at 13:06

0

any way i used following code for temp solution.Hope this will resolve in feature updates.

use this as ngIf for table //ngif visible: boolean = true;

place this in your btn click action

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

answered Mar 09 '22 at 13:06

ShivMurat Patel

1
1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 09 '22 at 15:33

Prime ng table not updating on first change

2 Answers2