* ng用于访问多个阵列Angular

Question

我有包含：id和内容的数组。

dashboard.component.ts

this.tablePresetColumns = [{id: 1,content: 'Username'},{id: 2,content:'Status'}];

this.tablePresetData = [[{id: 1, content: "Budi Kurniawan"},{id: 2, content: "Busy"}]]

到目前为止，我尝试过这些：

Dashboard.component.html

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

如何在我的component.ts上访问我的数组的数据，所以我可以将数据显示为表格格式？我正在尝试*ngFor但仍然无法显示任何内容。

Answer 1

你不需要在你的行中设置i，因为你有一个嵌套的*ngFor。

*ngFor="let row of tablePresetColumns - 这里的行是数组的当前对象，所以row[i]，没有任何价值。

只需使用*ngFor="let cell of row"。

<table class="table" [ngClass]="modes">
    <thead *ngIf="columns">
     <tr>
     <th *ngFor="let col of tablePresetColumns">
     {{col.content}}
     </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>

Answer 2

您不需要使用索引访问嵌套数组的元素，只需在嵌套项上使用*ngFor即可。

<table class="table" [ngClass]="modes">
  <thead>
    <tr>
       <th *ngFor="let col of tablePresetColumns">{{col.content}}</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>

Stackblitz示例：https://stackblitz.com/edit/angular-h7a3fj

Answer 3

不需要访问row[i]只需通过*ngFor="let cell of row"将解决您的问题。

 <table class="table" [ngClass]="modes">
  <thead>
    <tr>
       <th *ngFor="let col of tablePresetColumns">{{col.content}}</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>

希望这有帮助！

Answer 4

好吧，我已经实现了这个代码，它的工作正常。请试试这个，让我知道问题是否仍然存在

.html文件

<table class="table" [ngClass]="modes">
<thead>
    <tr>
        <th *ngFor="let col of tablePresetColumns">
            {{col.content}}
        </th>
    </tr>
</thead>
<tbody>`enter code here`
    <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>

.ts文件

tablePresetColumns = [{id: 1,content: 'Username'},{id: 2,content:'Status'}];
tablePresetData = [[{id: 1, content: "Budi Kurniawan"},{id: 2, content: "Busy"}]];

Output