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检查结果。例如，如果只有一个可用属于第三列，我该如何将其放在那里？

这是我目前的做法：

<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

Answer 1

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

更好的方式，如评论中所述。使用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>

Angular / Typescript：从数组

1 个答案: