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

2次元形式の再フォーマット動的オブジェクトを作成することができます。私は以下のコードを試していないが、一度試してみてください。

// 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> 

将来的にはあなたが簡単に簡単な機能の種類をソート、検索、フィルタリングを行うことができるように、私は意図的に、keyresult内部の配列を持っていました。