Angular 5无法显示HTML中的对象数组

时间:2018-09-01 19:58:52

标签: html arrays angular5

我有字符串数组,每个项目都被调用到函数param中,以将结果转换为JSON格式。我想在每个项目中显示结果,但不会以HTML显示。 变量this.tones的结果格式如下:

[
 {score: 0.610885, tone_id: "anger", tone_name: "Colère"},
 {score: 0.506763, tone_id: "analytical", tone_name: "Analytique"}
]

每个项目都有不同的结果,因此它可以将两个对象放入数组,或者一个或一个都不存在。

我在component.ts中的代码:

this.accountService.getFeedbacks().subscribe(res => {
      this.feedbacks = res as Feedback[];      
      //  console.log(this.feedbacks);
      this.feedbacks.map(item => {
        this.message.push(item.feedback);
        localStorage.setItem('list_assigned', JSON.stringify(this.message));
        // console.log(this.message);
      })
      }, err => {
        console.log(err);
    });

// test is the array of strings which each item will be treated in TestAnalyser() function
var test = JSON.parse(localStorage.getItem('list_assigned'));
    console.log(test);

    test.map(item => {

      this.toneAnalyser.TestAnalyser(item).subscribe(res => {
        this.tone = res;
        this.tones = this.tone.document_tone.tones;
        this.tones.map(obj => {
            this.scores = obj.score;
            this.toneTexts= obj.tone_name;
            // console.log(this.scores, this.toneTexts)  
            console.log(this.tones);
        })
        // console.log(this.tones);
      }, err => {
        console.log(err);
      });

    });

component.html:

<table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Message de retour</th>
                <th scope="col">Score</th>
                <th scope="col">Emotion</th>
              </tr>
            </thead>
            <tbody *ngIf="feedbacks.length">
              <tr *ngFor="let fd of feedbacks; let t of tones; let i = index">
                <td scope="row">{{i + 1}}</td>
                <td>{{fd.feedback}}</td>
                <td>{{t.score}}</td>
                <td>{{t.tone_name}}</td>
              </tr>
            </tbody>
          </table>

非常感谢您的帮助!

0 个答案:

没有答案