使用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陣列，這樣在將來你可以很容易地進行搜索，過濾，排序容易樣的功能。