* ngFor - цикл двух массивов на одном уровне - PullRequest
Новая
       4

* ngFor - цикл двух массивов на одном уровне

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

Я пытаюсь зациклить два массива, используя один * ngFor, но он не показывает никакого элемента в браузере.У меня есть образец HTML-файла ниже и инициализированные массивы в файле компонента.

Файл HTML: 

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

Файл машинописи: 

  results = [];
  feedbacks = [];

  ngOnInit(){

    this.feedbacks = ["Le système est trop lent ", "Le top! Un exemple d'excellence.", "C'est quoi ce bordel !"]; 

    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"}]  
    ];
    console.log(this.results);

  }

Ответы [ 3 ]

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

Вам следует немного изменить ваш шаблон:

<tbody *ngIf="feedbacks.length"> <ng-container *ngFor="let feedback of feedbacks;let i=index"> <tr> <td>{{ i }}</td> <td>{{feedback}}</td> <td colspan="2"> <ul> <div *ngFor="let result of results[i]"> <td>Test: {{result.score}}</td> </div> </ul> </td> </tr> </ng-container> </tbody>

это предполагает, что индексы в массивах соответствуют друг другу.Другое решение состоит в том, чтобы изменить вашу модель примерно так:

feedbacks = [{ value: "Le système est trop lent ", results: [{score: 0.535632, tone_id: "anger", tone_name: "Colère"}] }];

и выполнить итерацию с двумя вложенными *ngFor s.

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

используйте let obj of results[i] для этого. 

<tbody *ngIf="feedbacks.length">
    <ng-container *ngFor="let fd of feedbacks;let i=index">
        <tr>
            <td>{{ i }}</td>
            <td>{{fd}}</td>
            <td colspan="2">
                <ul>
                    <div *ngFor="let obj of results[i]">
                        <td>Test: {{obj.score}}</td>
                    </div>
                </ul>
            </td>
        </tr>
    </ng-container>
</tbody>
0 голосов
/ 21 сентября 2018

Структурная директива ngFor принимает в качестве входных данных только одну итерацию.Он не будет принимать более одного массива.Вместо того, чтобы пытаться перебрать два отдельных массива, я бы предложил создать один массив (при условии, что оба массива имеют одинаковую длину). 

// HTML

<tbody *ngIf="feedbacks.length">
   <ng-container *ngFor="let item of combinedArray;let i=index">
     <tr>
       <td>{{ i }}</td>
       <td>{{fd}}</td>
         <td colspan="2">
           <ul>
             <div *ngFor="let obj of item.result">
               <td>Test: {{obj.score}}</td>
             </div>
           </ul>
       </td>
    </tr>
  </ng-container>
</tbody>

// Typescript

combinedArray: { feedback: any, results: any }[] = [];

ngOnInit(){
  ...

  this.feedbacks.forEach((fb, index)
    => this.combinedArray.push({ feedback: fb, result: this.results[index] }));
}
...