Angular2如何从ngFor中只获取一个值

时间:2017-04-10 15:32:43

标签: angular ngfor

我目前正从服务器获取深层嵌套的json对象,并使用管道来解析它们。

但它正在循环每个键,即使我只想获得一个值。我怎么能做到这一点?

这些是代码

从'@ angular / core'导入{Pipe,PipeTransform};

@Pipe({name: 'keyValues'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
   }
 }

Html模板

 <div *ngFor="let detail of teaInfo | keyValues">
     <div *ngFor="let basicinfo of detail.value | keyValues">
            <p>School: {{basicinfo.value}}</p>
     </div>
 </div>

结果

school:example1

school:example2

school:example3

school:example4

school:example5

school:example6

我也试过这个

  <div *ngFor="let detail of teaInfo | keyValues">
         <div *ngFor="let basicinfo of detail.value | keyValues">
                 <p>School: {{basicinfo.value['example2']}}</p>
          </div>
      </div>

结果

 school:

 school:example2

 school:

 school:

 school:

 school:

仍在循环而不给予价值..

但我只想得到

school:example2

没有循环任何东西..

帮助将不胜感激!

1 个答案:

答案 0 :(得分:2)

这可能会做你想要的:

<div *ngFor="let basicinfo of detail.value | keyValues | splice:2:1">