HTMLのオブジェクトをAngular2で参照する

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のようにそれらを返すカスタムパイプを作成します。あなたのコンポーネントテンプレートにあなたがfolowingありません

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