* 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

Хорошо, я реализовал этот код и он работает нормально. Пожалуйста, попробуйте это и дайте мне знать, если проблема все еще сохраняется

.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"}]];

Выход

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

Не нужен доступ 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>

Надеюсь, эта помощь!