ngFor循环通过Object

问题描述 投票:1回答:1

我试图迭代一个对象。我尝试了以下方法:

管:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    if (!value) {
      return value;
    } 

let keys = [];
for (let key in value) {
  keys.push({key: key, value: value[key]});
} 
return keys;

} }

在我的HTML中:

<div *ngIf="details">
<li *ngFor=" let entry of details| keys">           
{{entry.key}},  {{entry.value}}
</li>

它的工作,但它显示了我的整个目标。我只需要对象的某些键。所以我可以做这样的事情(这是一个带有数组的对象,如果它只是一个对象,这种方式不起作用):

<button ion-item *ngFor="let movie of movies?.results" (click)="goToDetails(movie.id)">
  <h2>{{movie.title}}</h2>
{{movie.overview}}
</button>
loops angular ngfor
1个回答
2
投票

您需要实现过滤管道或将参数(所需的属性名称)传递给管道:

<li *ngFor=" let entry of details| keys:'name', 'value'">
//or
<li *ngFor=" let entry of details| keys | filter">

for (let key in value) {
  if(!Array.isArray(args) || args.length === 0 || args.indexOf(key) > -1)
  keys.push({key: key, value: value[key]});
} 

<li *ngFor=" let entry of details| keys:'name'">           
{{entry.key}},  {{entry.value}}
</li>
© www.soinside.com 2019 - 2024. All rights reserved.