Referencia a objetos en HTML en Angular2 - javascript, html, angular, mecanografiado

Estoy obteniendo datos de un servidor api y almacenándolos como un objeto en TypeScript, necesito ayuda para hacer referencia a esos datos en HTML como un par de clave y valor.

Mecanografiado:

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);
}

Mis datos están en this.attributes y se parece a esto

Quiero poner clave y valor en una tabla como

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

¿Cómo lograría esto en Angular2?

Respuestas

paso 1: Cree una tubería personalizada que almacene todas las claves y valores de los objetos en una matriz y los devuelva así

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: en su plantilla de componente usted hace lo siguiente

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