在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 ：在您的组件模板中执行以下操作

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