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）。然后重复使用该组件两次，以获取单独封装的重复数据网格。否则，两个数据网格之间都会有很多逻辑渗漏，这可能很难管理。

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

1 个答案: