在Angular2中引用HTML中的對象

Question

我從api服務器獲取數據並將其作爲對象存儲在TypeScript中，我需要幫助將HTML中的數據作爲鍵和值對引用。

打字稿：

if (x.AttributeTemplateId==templateId) { 
    x['AttributeTemplateValue'].forEach(function(x){ 
     console.log('hello'); 
     if (x.AttributeTemplateId==templateId){ 
     console.log(templateId); 
    (function(y){ 
     console.log("hello2"); 
     newName.push(y.CodeSet); 
     newValue.push(y.CodeValue); 
     // console.log([newAttributes]); 
     })(x); 
     } 
    }) 
} 
}) 
newName = this.name; 
newValue = this.value; 
this.attributes = this.name.reduce((acc, value, i) => (acc[value] = this.value[i], acc), {}); 
console.log(this.attributes); 
} 

我的數據是在this.attributes和它看起來像這樣

我想把鍵和值在表像

<table> 
    <tr> 
    <th> Name </th> 
    <th> Value </th> 
    </tr> 
    <tr key> 
    <td value > </td> 
    </tr>--> 
</table> 

我如何在Angular2中實現這一點？

Answer 1

步驟1：創建一個存儲陣列中的全部對象鍵和值，並返回他們就這樣

import { PipeTransform, Pipe} from '@angular/core'; 

@Pipe({name: objKeys}) 
export calss objKeysPipe implements PipeTransform { 
    transform(value, arguments: string[]) :any { 
    let keys= []; 
    for (let k in value){ 
    keys.push({key: k, value: value[k]}); 
    } 
    return keys; 
} 

SETP 2定製的管道：在你的組件模板，你做了如下因素

<table> 
    <tr *ngFor="let att of attributes | objKeys"> 
    <th>{{att.key}}</th> 
    <th>{{att.value}}</th> 
    </tr> 
</table>