使用不同的数据集在同一页面上呈现多个网格

Question

我在同一页上有两个数据网格。目标是让每个数据网格使用不同的参数和呈现数据进行 API 调用，以便它们单独运行。

我可以让网格进行不同的 API 调用并获取数据。但是，我在为这些网格单独设置数据时遇到了问题。

我创建了一个 StackBlitz example，演示了这个问题。

app.component.ts

refresh(state: ClrDatagridStateInterface, postId) {
      this.loading=true;
      const filters: { [prop: string]: any[] } = {};
      if (state.filters) {
        for (const filter of state.filters) {
          const { property, value } = <{ property: string; value: string }>filter;
          filters[property] = [value];
        }
      }
      if (state.page != undefined && state.page != undefined)
      {
        setTimeout(() => {
        this.loading = true;
        this.getData(postId, state.page.from, state.page.size );
        });
      }
  }

    getData(postId:string, page: number, size:number  ) {
    this.userAccounts$ = this.informationService.GetUserAccounts(postId);
      this.userAccounts$
        .subscribe((data) => {
            this.users = JSON.parse(JSON.stringify(data)) || null
            this.loading = false
        }
        );
    }

我正在使用 Post 个 ID 数组在 for 循环中生成网格。

posts:any = ["1","4"];

每个网格都应该使用该 postId 进行 API 调用，

Ex: https://jsonplaceholder.typicode.com/comments?postId=1
Ex: https://jsonplaceholder.typicode.com/comments?postId=4

获取postId和email并将其显示在网格中。每个网格都需要单独运行，无论是排序还是过滤还是分页。

getData 函数正在全局设置 API 数据以供两个网格使用。我怎样才能为网格单独设置它？

Answer 1

您总是在订阅中设置 this.users = JSON.parse(JSON.stringify(data)) || null，并且总是循环 users。所以基本上你不会创建一个不同的属性来保存数据。

一般来说，我会反对这种方法。我要做的是将整个数据网格一次封装为一个组件，并带有一个输入以接受配置数据（看起来像 postId）。然后重复使用该组件两次以获得单独封装的重复数据网格。否则，两个数据网格之间会出现大量逻辑漏洞，并且可能难以管理。

使用不同的数据集在同一页面上呈现多个网格

Render Multiple grids on the same page with different dataset

angular

vmware-clarity