Angular / Typescript: 从数组创建表格的方法

Question

我将从后端获取一个JSON对象，它看起来像：

export class Testobject {
  name: string;
  organization: string;
  mrn: string;
  checkresults: CheckResult[];
}

export class CheckResult {
  message: string;
  errortyp: string;
  name: string;
  timestamp: string;
}

每个测试对象都有一个包含不同长度不同CheckResults的数组。 我想在表格中显示数据。表格的标题是固定的。 我不知道如何将数组的元素分配到正确的列中。

我的问题是checkresult数组可能只包含2/3或1/3 checkresults。 例如，如果只有一个可用于第三列，那么我该如何放置它？

这是我目前的方法：

<thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Organization</th>
        <th>Result</th>
        <th>Date / Time</th>
        <th>CheckResult name 1</th>
        <th>CheckResult name 2</th>
        <th>CheckResult name 3</th>
      </tr>
      </thead>

      <tbody>
      <tr *ngFor="let testobject of testobjects">
        <td>{{testobject.mrn}}</td>
        <td>{{testobject.name}}</td>
        <td>{{testobject.organization}}</td>
        <td *ngFor="let checkresult of testobjects.checkresults">

          <div *ngIf="checkresult.errortyp == 'Error'" class="ccrdot red"></div>
          <div *ngIf="checkresult.errortyp == 'Warning'" class="ccrdot yellow"></div>
          <div *ngIf="checkresult.errortyp == 'successful'" class="ccrdot green"></div>
          <div *ngIf="checkresult.errortyp == null" class="ccrdot"></div>
        </td>
        <td>{{checkresult.timestamp}}</td>
      </tr>
      </tbody>

期望结果：

每个CheckResult都有一个名称，显示它属于哪一列。

Id   Organization mrn        check name 1 check name 2  check name 3 
----------------------------------------------------
to1  | org1        | 1        |  error     |             | error      <- 2 element in Array 
to2  | org2        | 2        |            |             | error      <- 1 elements in Array 
to3  | org3        | 1        |            | error       |            <-1 element in Array         

- Simon

---

你当前的方法有哪些问题还不太清楚。通常都是这样做的。 - Estus Flask

谢谢您的评论。我已经更新了问题。希望我已经指出了我的问题。 - Simon

处理这个问题的最佳方式是处理结果以适应布局。我不确定具体的工作原理，但可能可以使用ngFor本地“索引”变量来实现，并且这种方式会变得混乱。 - Estus Flask

Answer 1

由于最大错误长度是固定的。我认为，可以根据您的要求固定td，而不是对每个td使用for each。同时，您可以使用管道/方法检查错误类型并显示消息。

更好的方式，如评论中建议的那样。使用带有布局系统的div，这将自动对齐您的HTML

示例：

<thead>
<tr>
  <th>ID</th>
  <th>Name</th>
  <th>Organization</th>
  <th>Result</th>
  <th>Date / Time</th>
  <th>Error1</th>
  <th>Error2</th>
  <th>Error3</th>
</tr>
</thead>

<tbody>
<tr *ngFor="let testobject of testobjects">
  <td>{{testobject.mrn}}</td>
  <td>{{testobject.name}}</td>
  <td>{{testobject.organization}}</td>
  <td>
    <div *ngIf="hasTypes(testobjects.checkresults, 'Error')"></div>
  </td>
  <td>
    <div *ngIf="hasTypes(testobjects.checkresults, 'Warning')"></div>
  </td>
  <td>
    <div *ngIf="hasTypes(testobjects.checkresults, 'Info')"></div>
  </td>
</tr>
</tbody>

- xdeepakv

---

帮助了我，谢谢！ - bakunet