使用Angular2将动态对象绑定到Html

Question

this.procFilterResults: any[];  
this.procservices.GetProcData(this.selectedServer, this.selectedProjectName, 
           this.selectedProc, this.procInput,_inputs) 
    .subscribe(res => {     
      this.procFilterResults = JSON.parse(res); 
      this.Keys=Object.keys(this.procFilterResults[0]);     
      console.log(this.procFilterResults); 
     }, 
     error => this.errorMessage = <any>error); 

<table class="table table-bordered"> 
     <thead> 
      <th *ngFor="let key of Keys"> 
      {{key}} 
      </th> 
     </thead> 
    <tbody> 
     <tr *ngFor= 'let res of procFilterResults'> 

     </tr> 
    </tbody> 
</table> 

基于我的输入，我得到每个请求的新对象。我想将结果绑定到表格。 有没有什么方法可以将绑定到HTML表的对象反序列化。

Answer 1

您可以在二维格式中创建一个考虑重新格式化的动态对象。我没有测试下面的代码，请尝试一次。

// Add this inside subscribe 
this.Keys = (this.procFilterResults.length || []) && 
      Object.keys(this.procFilterResults[0]); 
this.results = this.procFilterResults.map(
    element => { 
    let obj = []; 
    this.Keys.forEach(key => obj.push({key: key, value: element[key]})) 
    return obj; 
    } 
) 

的Html

<table class="table table-bordered"> 
    <thead> 
     <th *ngFor="let key of Keys"> 
      {{key}} 
     </th> 
    </thead> 
    <tbody> 
     <tr *ngFor='let res of results'> 
     <td *ngFor="let item of res"> 
      {{item.value}} 
     </td> 
     </tr> 
    </tbody> 
</table> 

我故意有key内result阵列，这样在将来你可以很容易地进行搜索，过滤，排序容易样的功能。