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

【问题标题】：ngFor - Unable to sort array of objects Angular 5ngFor - 无法对对象数组进行排序Angular 5
【发布时间】：2018-09-20 10:04:48
【问题描述】：

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

数组的输出显示在 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 文件中，我正在循环使用 *ngFor 初始化为 results 的数组，但无法在数组中显示对象：

<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>

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

【问题讨论】：

您没有对象数组。你有一个或多个数组。所以res 是一个数组，而不是一个对象。
我明白了，我不明白为什么它返回一个错误，指的是 *ngFor can't iterate objects ？在控制台中：错误错误：找不到类型为“对象”的不同支持对象“[对象对象]”。 NgFor 只支持绑定到 Arrays 等 Iterables。
可能是因为您没有向我们展示代码。发布一个完整的最小示例作为 StackBlitz。
它在 StackBlitz 上运行良好：link 但在我的浏览器上它仍然是空表并出现相同的错误。我该怎么办？
找出 stackblitz 示例和您的实际代码之间的区别。

标签： angular arrayobject arrayofarrays

【解决方案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>

【讨论】：

它没有在控制台中显示任何错误信息：错误错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。