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

Posted 2023-03-15

【中文标题】ngFor - 无法对对象数组进行排序Angular 5

【英文标题】：ngFor - Unable to sort array of objects 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 示例和您的实际代码之间的区别。

【参考方案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。