dataSource mat table 上的问题。我该如何解决这个问题答案

【问题标题】：Issue at dataSource mat table.How can i solve this issuedataSource mat table 上的问题。我该如何解决这个问题
【发布时间】：2022-08-18 15:59:10
【问题描述】：

我的问题是表数据没有打印，我认为我的问题出在我的数据源上，我不知道我必须以什么方式修复它。我将分享我的模型和相关代码来解决这个问题。这是我的模型

export class HubxModel{ 
    id: number;
    categoryId: number;
    itemTitle: string;
    itemUnit: string;
    isActive: boolean=true;
    itemValue: string;
    patientId: number;
    isDeleted: boolean;
}

下面的代码是我如何定义我的数据源

 export class UserPatientsReportFormComponent implements OnInit {
    displayedColumns: string[] = [\'itemTitle\', \'itemValue\', \'itemUnit\'];
    
hubxReportList : Array<HubxDataModel> = [];

下面的代码是我的 html 部分

<div class=\"row paddingTop headerpaddingbottom\" >
                  <section class=\"col-sm-8 example-container mat-elevation-z8\" tabindex=\"0\">
                    <table mat-table [dataSource]=\"hubxReportList \" class=\"col-sm-12\">
                      <ng-container matColumnDef=\"itemTitle\">
                        <th mat-header-cell *matHeaderCellDef> Test Name </th>
                        <td mat-cell *matCellDef=\"let element\"> {{element.itemTitle}} </td>
                      </ng-container>
                    
                      <!-- value Column -->
                      <ng-container matColumnDef=\"itemValue\">
                        <th mat-header-cell *matHeaderCellDef> Result </th>
                        <td mat-cell *matCellDef=\"let element\"> {{element.itemValue}} </td>
                      </ng-container>
                    
                      <!-- Unit Column -->
                      <ng-container matColumnDef=\"itemUnit\">
                        <th mat-header-cell *matHeaderCellDef> Unit </th>
                        <td mat-cell *matCellDef=\"let element\"> {{element.itemUnit}} </td>
                      </ng-container>
                      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>
                      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>
                    </table>
                  </section>
                </div>

结果出来像这个表数据不打印

这就是我从 api 获取数据的方式

getHubxReport() {
    //debugger
    this.usersService.getHubxReport(this.clientId).subscribe((response: ResponseModel) => {
      if (response != null && response.data != null && response.data.length > 0) {
        this.hubxReportList = response.data;
   
      }
    }
    );
  }

在 console.log(this.hubxReportList) 之后

我的数据库表

创建一个 stackblitz 示例。图片不能很好地表达问题。
我认为我的问题在于数据源。任何想法我怎样才能使它正确。
看起来你的“数组”的属性不是你显示的属性，在你的订阅函数中使用console.log(this.huxReportList)（我想变量在 PascalCase 而不是 CamelCase 或类似的）
我添加了检查console.log（this.huxReportList）后得到的结果，请检查

标签： angular

【解决方案1】：

更新：（包括 Stackblitz 示例）

https://stackblitz.com/edit/angular-mat-table-design-8ixhfs?file=src/app/app.component.ts

实际上，您使用了错误的字段来显示在您的模板中。按照你的截图安慰，您在hubxReportList 列表中没有itemTitle、itemValue 和itemUnit 属性，您将它们包含在每个项目的hubxDataItems 属性中，所以如果您希望在中显示hubxDataItems 项目你的表你需要修改你的组件代码，如下所示。

getHubxReport() {
    //debugger
    this.usersService.getHubxReport(this.clientId).subscribe((response: ResponseModel) => {
      if (response?.data?.length > 0) {
      this.hubxReportList = response.data.reduce((a, i) => {
         a.push(...(i?.hubxDataItems || []));
         return a;
      }, [] as any)

      }
    }
    );
  }

【讨论】：

我还有一个问题，让我们说 category = 1 有一个唯一的 itemValue 和 itemUnit，但根据我正在实现的代码，它正在打印所有 categoryId 的所有 itemValue 和 itemUnit。我只想根据 categoryId 打印 itemtitle、itemvalue 和 itemunit
那么您的意思是，您只需要显示每个类别的hubxDataItems 列表中的第一项详细信息吗？
为了更好地理解我已经共享了我的数据库表。在该表中有 categoryId，对于每个 categoryId，都有不同的 itemtitle、itemvalue 和 itemunit 数据。但在我的 Mat-table 上，它正在打印所有 categoryId 的 itemtitle、itemvalue 和 itemunit 数据。我只想根据其 categoryId 打印数据
目前，它显示了每个类别的hubxDataItems 项目的整个列表，因此如果您需要显示确切类别的hubxDataItems 列表，那么您需要过滤this.hubxReportList 的列表。
你能给我一个stackblitz代码吗

【解决方案2】：

根据您的代码，在 getHubxReport 函数中，您将结果分配给 hubxReportList 但您从未将其分配给 dataSource 变量。

我认为你需要申请

this.dataSource.data = response.data;

或者，您可以将 html 文件中的表定义更改为：

<table mat-table [dataSource]="hubxReportList.hubxDataItems" ...

使其正确渲染。

【讨论】：

@ManipuriVlogs 根据您更新的问题，您需要将 [dataSource] = "hubXReportList" 更改为 [dataSource]="hubxReportList.hubxDataItems"
仍然不工作。表显示空白
@ManipuriVlogs，我建议分享一个 stackblitz 来重现问题