ngFor 循环遍历对象答案

【问题标题】：ngFor loop through ObjectngFor 循环遍历对象
【发布时间】：2017-06-12 23:19:08
【问题描述】：

我试图遍历一个对象。我尝试了以下方法：

管道：

@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>

【问题讨论】：

{{entry.value.yourDesiredKey}} 不起作用吗？我不明白这个问题
如果您需要某些键.. 循环中的 *ngIf="entry.key==condition" 不起作用吗？
这行不通：我收到错误消息无法读取 null 的属性“标题”。问题是 ngFor 正在循环遍历我的整个对象。我只需要展示某些部分。与 ngFor 一样，您可以通过执行诸如 {{entry.title}} 之类的操作来遍历它的某些部分
它应该返回整个对象，因为您根本没有在管道逻辑中过滤数据。

标签： loops angular ngfor

【解决方案1】：

您需要实现过滤器管道或将参数（所需的属性名称）传递给您的管道：

<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>

【讨论】：

我尝试使用您的第一行并使用了我能想到的每一种组合，但没有任何显示。如果我只想显示标题，我该怎么做？{{}} 之间应该有什么。我是新手，我无法弄清楚
添加了使用args的示例
它不起作用。它将显示整个对象。 Angular 取出循环对象的 ngfor 是错误的。
angular其实是正确的，你的transform签名不正确，应该是public transform(value:any, ...args:any[]):any
我只是说取出它的原因是不合法的。这就是为什么他们正在研究一个管道来做到这一点。我现在正在尝试你的建议。谢谢