Question

我有一个HTML表格，我需要从安慰输出中获取数据到表格。请帮忙。 HTML代码：

<table class="table">
   <tr>
     <th>Completed On</th>
     <th>ID</th>
     <th>ParticipantId</th>
   </tr>
   <tr *ngFor="let data of result">
     <td>{{ data.completedOn }}</td>
     <td>{{ data.id }}</td>
     <td>{{ data.participantId }}</td>
   </tr>
</table>

TS代码：公开结果：any = [];

   this.service
            .getParticipent(comparedCampaign.id,token)
            .subscribe(
                participent => {
                    this.loading = false;
            // this.result = data;
             console.log( this.result);
                    var survey = this.surveyResults;
                    if(participent.length > 0) {
                        var data =[];
              participent.map(function(item) { 
                var list = survey.filter(function(result) {
                    if(result.participantId) {
                        return result.participantId == item.id
                    }
               })
                data.push(list);
                 this.result = data;
                 console.log( this.result);
             })

                        console.log(data);
                    } else {
                        alert('No Participent found!');
                    }
                }, error => {
                    console.log(error)
                })
    }
}

从此我需要将CompletedOn，id和participantId提取到表

JSON安慰输出：

 [[{"satisfaction":"[object Object]","completedOn":"2017-08-22T08:52:55.788Z","id":3,"participantId":217},{"satisfaction":{"price":"less","recomondation":"1","winback":"reason6"},"completedOn":"2017-08-22T09:12:40.800Z","id":4,"participantId":217},{"satisfaction":{"price":"less","recomondation":"1","winback":"reason6"},"completedOn":"2017-08-22T11:36:04.861Z","id":5,"participantId":217},{"satisfaction":{"price":"less","recomondation":"1","winback":"reason6"},"completedOn":"2017-08-22T11:59:24.334Z","id":6,"participantId":217},{"satisfaction":{"price":"medium","customer":"yes","recomondation":"2","sales":["phone","Shop","webshop"],"webVist":"5","shopVist":"5","phoneVist":"5","prodandService":["{product_list}"],"importance":["Service"],"frequence":"quarter","satisfaction":"3"},"completedOn":"2017-08-22T12:20:54.280Z","id":7,"participantId":217},{"satisfaction":{"price":"medium","customer":"no","recomondation":"1","winback":"reason1","winback_quality":"reason2"},"completedOn":"2017-08-22T12:22:43.153Z","id":8,"participantId":217},{"satisfaction":{"prodandService":[{"index":"Orbiz"},{"index":"qwerq"},{"index":"asfd"},{"index":"test"},{"index":"test123"},{"index":"TestWD"},{"index":"IOS app"},{"index":"Lipstick"},{"index":"Foundation"},{"index":"lipstick"},{"index":"Website"},{"index":"App IOS"},{"index":"Shampoo Vanilla"},{"index":"Shampoo Strawberry"},{"index":"car"},"Lipstick"],"price":"medium","customer":"yes","recomondation":"4","sales":["phone"],"phoneVist":"3","importance":["Quality"],"frequence":"quarter","satisfaction":"3"},"completedOn":"2017-08-28T09:39:54.676Z","id":10,"participantId":217},{"satisfaction":{"prodandService":[{"index":"Orbiz"},{"index":"qwerq"},{"index":"asfd"},{"index":"test"},{"index":"test123"},{"index":"TestWD"},{"index":"IOS app"},{"index":"Lipstick"},{"index":"Foundation"},{"index":"lipstick"},{"index":"Website"},{"index":"App IOS"},{"index":"Shampoo Vanilla"},{"index":"Shampoo Strawberry"},{"index":"car"},"Foundation","IOS app","test123","test"],"price":"medium","customer":"yes","recomondation":"5","sales":["visits"],"salesVist":"3","importance":["Quality"],"frequence":"year","satisfaction":"5","knowledge":["IOS app","Foundation","Website"],"development":"littleLess","suppliers":"yes","competators":"60","competators_reasons":"Quality","Need":["{product_list}"],"service":"5","collaboration":"4","continuedCollaboration":"3","improvements":["Service","Price"],"winback":"reason3"},"completedOn":"2017-08-28T14:45:13.991Z","id":11,"participantId":217},{"satisfaction":{"prodandService":[{"index":"Orbiz"},{"index":"qwerq"},{"index":"asfd"},{"index":"test"},{"index":"test123"},{"index":"TestWD"},{"index":"IOS app"},{"index":"Lipstick"},{"index":"Foundation"},{"index":"lipstick"},{"index":"Website"},{"index":"App IOS"},{"index":"Shampoo Vanilla"},{"index":"Shampoo Strawberry"},{"index":"car"},"TestWD","Lipstick"],"price":"less","recomondation":"4","sales":["phone"],"phoneVist":"3","importance":["Quality","Assortment"],"frequence":"quarter","satisfaction":"4","knowledge":["IOS app"],"Need":["TestWD","Lipstick"],"development":"same","suppliers":"yes","competators":"60","competators_reasons":"Assortment","service":"4","collaboration":"4","continuedCollaboration":"3","improvements":["Assortment"],"winback":"reason4"},"completedOn":"2017-09-01T14:23:04.533Z","id":13,"participantId":217}]]

有错误：＆＃34;例外：无法设置属性＆＃39;结果＆＃39;未定义＆＃34;

请帮助。提前致谢

Answer 1

您需要访问数组的第0个索引，然后分配给结果

this.service.getParticipent(comparedCampaign.id,token).subscribe(
participent => {
   this.result = participent[0];
}

然后您可以按照上面提到的那样迭代并显示

 <tr *ngFor="let data of result">
      <td>{{ data.completedOn }}</td>
      <td>{{ data.id }}</td>
      <td>{{ data.participantId }}</td>
 </tr>

Answer 2

我猜你是以错误的格式显示数组，所以试试这个

this.service.getParticipent(comparedCampaign.id,token).subscribe(
participent => {
   this.result = participent;
}

并像这样使用你的数组

 <tr *ngFor="let data of result">
      <td>{{ data?.completedOn }}</td>
      <td>{{ data?.id }}</td>
      <td>{{ data?.participantId }}</td>
 </tr>

也请尝试在HTML中打印整个数组，以便更好地理解这个

{{result | json}}

如何使用angular2

2 个答案: