Question

我的页面是关于在班次指示器上显示用户的数据表。

我的dashboard.component.html

<table class="table">
      <thead>
       <tr>
       <th *ngFor="let col of tablePresetColumns">
       {{col.content}}
       </th>
       <th></th>
       <th></th>
       </tr>
      </thead>
      <tbody>
       <tr *ngFor="let row of tablePresetData ">
       <td *ngFor="let cell of row"> {{cell.content}}</td>
     <td *ngFor="let cell of row"> 
      <span class ="dot" [ngClass]="{
       'dot-yellow' : cell.content == 'Busy',
       'dot-green' : cell.content == 'Idle',
       'dot-red' : cell.content == 'Overload'}">
       </span>
     </td>
       </tr>
      </tbody>
  </table>

我的示例数据：

  tablePresetColumns = [{ id: 1, content: "Username" }];
  tablePresetData = [
    [{ id: 1, content: "Adiet Adiet" }, { id: 2, content: "Idle" }],
    [{ id: 1, content: "Andri Irawan" }, { id: 2, content: "Idle" }],
    [{ id: 1, content: "Ari Prabudi" }, { id: 2, content: "Idle" }]
  ];

我应该怎么做：

删除我要显示的页面中的状态，因此出现用户名和颜色指示符

我尝试将* ngFor更改为（索引为1）：

<td *ngFor="let cell of row"> {{cell.content[1]}}

但是它根本不起作用

Answer 1

尝试

<td> {{row[0].content}}</td>

代替

<td *ngFor="let cell of row"> {{cell.content[1]}}

Answer 2

怎么样

<table class="table">
  <thead>
    <tr>
      <th *ngFor="let col of tablePresetColumns">{{col.content}}</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tablePresetData">
      <ng-container *ngFor="let cell of row, let i = index">
        <td *ngIf="i == 0">{{cell.content}}</td>
        <td *ngIf="i == 0">
          <span
            [ngClass]="{
        'dot-yellow' : row[1].content == 'Busy',
        'dot-green' : row[1].content == 'Idle',
        'dot-red' : row[1].content == 'Overload'}"
          >
          </span>
        </td>
      </ng-container>
    </tr>
  </tbody>
</table>

请参见此处的实时示例：https://codesandbox.io/s/7y2r69992j

注意

我认为您的数据结构是一个笨拙且不语义的。如果您的数据看起来像这样会更好：

tablePresetColumns = ["Username", "Status"];
tablePresetData = [
  {username: "Adiet Adiet", status: "Idle"},
  {username: "Andri Irawan", status: "Busy" },
  {username: "Ari Prabudi", status: "Overload" }
];

所以您可以像这样显示表格

<table class="table">
  <thead>
    <tr>
      <th *ngFor="let col of tablePresetColumns">{{col}}</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tablePresetData">
      <td>{{ row.username }}</td>
      <td>
        <span [ngClass]="{
          'dot-yellow' : row.status == 'Busy',
          'dot-green' : row.status == 'Idle',
          'dot-red' : row.status == 'Overload'
        }">
        </span>
      </td>
    </tr>
  </tbody>
</table>

更容易阅读和维护。

还有一个实时示例：https://codesandbox.io/s/o27pv052z

调整要显示的内容的HTML表格Angular

2 个答案:

注意