使用 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>

根据我的输入，我正在为每个请求获取新对象。我想将结果绑定到 table。有什么方法可以在不反序列化对象的情况下绑定到 HTML table.?

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>

我特意在 result 数组中设置了一个 key，以便将来您可以轻松地执行搜索、过滤、排序等功能。

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

Binding a dynamic object to Html using Angular2

angular2-template

angular2-routing

angular2-services

angular