Question

我有一个数组，其中包含：id和content。

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

不需要访问权限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 2

您不必在行中设置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 3

您不需要使用索引访问嵌套数组的元素，只需在嵌套项目上使用*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 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

* ng用于访问多个数组Angular

4 个答案: