ngFor - невозможно отсортировать массив объектов Angular 5 - PullRequest
Новая
       43

ngFor - невозможно отсортировать массив объектов Angular 5

0 голосов
/ 20 сентября 2018

У меня есть массив массивов объектов в Angular, и я пытаюсь отсортировать в HTML.

Вывод массива отображается в хромированной консоли:

enter image description here

С образцом внутри массива:

enter image description here

в файле для машинописного текста: 

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>

Показывает пустой результат в таблице в браузере.

1 Ответ

0 голосов
/ 20 сентября 2018

С *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>
...