如何從我的 ngrx/data 服務中的數據自動刷新我的 PrimeNG 表？

Question

賞金將在 2 天內到期。 此問題的答案有資格獲得+100聲望賞金。 Dave正在從有信譽的來源尋找答案。

我正在使用 Angular 13 和 ngrx/data、store 和 entity (v.13)。 我已經設置了我的 ngrx/data 服務

export class MyObjService extends DefaultDataService<MyObject> {
    ...
}

然后是使用 PrimeNg 的組件。 我有一張桌子來展示我所有的物品......

<p-table #dt [value]="(myObjects$ | async)!" ...

服務文件包含在其中

  constructor(
    ...
    private service: MyObjService,
  ) { 
      ...
      this.myObjects$ = this.service.getAll(); 

問題是每次我執行更改后端存儲的操作時，例如刪除

  del(id: number){
    this.myObjService.delete(id)
    .subscribe(_ => {
      this.MyObjects$ = this.myObjService.getAll();
    } );

我必須刷新表格（我必須在上面調用“this.myObjects$ = this.myObjService.getAll();”）。 有沒有辦法可以設置表格，使表格中的數據自動刷新？ 我覺得這是 ngrx/data 允許我做的事情，但不確定它是如何完成的。

Answer 1

首先，您可以向服務中添加一個方法來監聽事件：假設您有一個包含表數據的object 。 假設Category是一個帶有id 、 name和所有數據字段的 object 。 然后您可以從rxjs import Subject ，這是一個可觀察的。 在您的service.ts文件中：

 export class CategoriesService {
  private categories:Category[] = [];
  private categoryUpdated = new Subject<Category[]>();

然后你可以添加一個方法作為中間件：

 getUpdateListener(){
    return this.categoryUpdated.asObservable();
  }

然后 go 到您的category.ts文件：從rxjs導入訂閱並將其存儲在變量中。

export class CategoriesComponent implements OnInit{
categories : Category[] = [];
category : Category; 
private categorySub : Subscription;

然后是構造函數：

constructor(private _categoriesService : CategoriesService){}

在ngOnInit中，我們首先從服務文件中獲取Category 。 就像您正在獲取數據一樣。 然后我們在subscription中執行我們的觀察。我們通過它設置 object 值。

ngOnInit(){
    this._categoriesService.getCategories();
    this.categorySub = this._categoriesService.getUpdateListener().subscribe((cate: Category[])=>{
      this.categories = cate;
    }) 
  }

那么你就不需要再使用其他 observable 了，它會處理一切。