ngFor-无法对对象数组Angular 5进行排序

Question

我在Angular中有一个对象数组，我正在尝试将其分类为HTML。

array的输出显示在chrome控制台中：

在数组中包含示例：

在打字稿文件中：

this.results = [
  [{score: 0.535632, tone_id: "anger", tone_name: "Colère"}],
  [{score: 0.633569, tone_id: "anger", tone_name: "Colère"},
   {score: 0.506763, tone_id: "analytical", tone_name: "Analytique"}],
  [{score: 0.895438, tone_id: "joy", tone_name: "Joie"}],
  [{score: 0.736445, tone_id: "joy", tone_name: "Joie"},
   {score: 0.955445, tone_id: "analytical", tone_name: "Analytique"}],
  [{score: 0.796404, tone_id: "anger", tone_name: "Colère"}],
  [{score: 0.52567, tone_id: "sadness", tone_name: "Tristesse"},
   {score: 0.639934, tone_id: "anger", tone_name: "Colère"}],
  [{score: 0.557769, tone_id: "fear", tone_name: "Peur"}],
  [{score: 0.51583, tone_id: "joy", tone_name: "Joie"},
  {score: 0.874372, tone_id: "confident", tone_name: "Confiant"}]    
];

在html文件中，我正在循环使用results初始化为*ngFor的数组，但无法在数组内显示对象：

<tbody *ngIf="results.length">
  <ng-container *ngFor="let res of results;let i = index">
    <tr>
      <td>{{ i + 1 }}</td>
      <td colspan="2">
        <table>
          <tr>
            <td>Score: {{res.score}}</td>
            <td>Emotion: {{res.tone_name}}</td> 
          </tr>
        </table>
      </td>
    </tr>
  </ng-container>
<tbody>

它在浏览器的表格中显示空结果。

Answer 1

对于*ngFor="let res of results"，res将成为results中每个索引处的值。在每种情况下，它将是另一个数组，因此您将需要另一个*ngFor来浏览其内容。

<tbody *ngIf="results.length">
  <ng-container *ngFor="let res of results;let i = index">
    <tr>
      <td>{{ i + 1 }}</td>
      <td colspan="2">
        <table>
          <tr *ngFor="let obj of res">
            <td>Score: {{obj.score}}</td>
            <td>Emotion: {{obj.tone_name}}</td>
          </tr>
        </table>
      </td>
    </tr>
  </ng-container>
<tbody>