如何在Angular 2.0中使用*ng-for对具有键的对象进行循环？

16 浏览
0 Comments

如何在Angular 2.0中使用*ng-for对具有键的对象进行循环？

我正在尝试在Angular 2 Alpha 28中做一些事情，但在使用字典和ngFor时遇到了问题。

我有一个在TypeScript中的接口，看起来像这样：

interface Dictionary {

[index: string]: string

}

在JavaScript中，这将转换为一个带有数据的对象，可能是这样的：

myDict={'key1':'value1','key2':'value2'}

我想要遍历这个对象，尝试了这个：

{{key}}:{{value}}

但是没有效果，下面的任何一种方式都不起作用：

{{value}}
{{key}}:{{value}}

在所有情况下，我都会得到类似于Unexpected token或Cannot find 'iterableDiff' pipe supporting object的错误。

我在这里缺少什么？这不再可能吗？（第一种语法在Angular 1.x中可以工作）或者遍历对象的语法是否有所不同？

0

3 答案

0 Comments

问题：如何在Angular 2.0中对带有键的对象进行*ng-for？

解决方法：使用内置的keyvalue管道，可以按以下方式使用：


    Key: {{item.key}} and Value: {{item.value}}

或者按以下方式使用，并在.ts文件中添加mySortingFunction：


    Key: {{item.key}} and Value: {{item.value}}




mySortingFunction = (a, b) => {
  return a.key > b.key ? -1 : 1;
}

Stackblitz: [https://stackblitz.com/edit/angular-iterate-key-value](https://stackblitz.com/edit/angular-iterate-key-value)

注意：无需在任何模块中注册，因为Angular管道在任何模板中都可以直接使用。它也适用于Javascript-Maps。

在类定义中添加`implements PipeTransform`（参见angular.io/guide/pipes#custom-pipes）。

感谢，我已添加并更新了新的for循环语法。

有人问是否有优势，其实我会选择他的方式！

请注意，对于Angular 6+答案，您需要使用至少Angular 6.1.10版本。之前尝试过6.0.9并没有成功。感谢您发现了这个问题，我已修复答案。

当我在Angular 7中看到错误消息时，没有提示存在这个管道。你能否修改你的答案，包括“找不到支持'object'类型的对象'[object Object]'的差异。NgFor只支持绑定到可迭代对象，如数组。”？

这对我有用！你只需要将“keyvalue管道”实现到*ngFor循环中。

0
0 Comments

问题的出现原因是在Angular 2.0中使用*ng-for对具有键的对象进行循环遍历时遇到困难。解决这个问题的方法是使用一个叫做ValuesPipe的管道来转换对象，并在模板中使用它。

首先，需要导入Pipe和PipeTransform类，并创建一个名为ValuesPipe的类，该类实现了PipeTransform接口。在transform方法中，使用Object.keys()方法获取对象的所有键，并使用map()方法将每个键对应的值返回。然后，在模板中使用*ngFor指令来循环遍历转换后的对象。

如果想要保留对键的引用，可以在转换后的对象中同时返回键和值。如果在转换后的对象中使用let关键字代替#关键字，也可以达到同样的效果。

在某些情况下，当使用pure: false选项时，可能会遇到"expression has changed after it was checked"错误。解决这个问题的方法是注入一个变化检测策略，并将其设置为impure。

另外，可以使用Object.values()方法来替代自己的映射操作，这样可以更简洁地实现相同的功能。

以上就是解决在Angular 2.0中对具有键的对象进行循环遍历的问题的方法。通过使用ValuesPipe管道和适当的模板语法，可以轻松地在Angular 2.0中实现对对象键的循环遍历。

0
0 Comments

问题的原因是Angular 2.0不支持在对象上使用*ng-for指令进行循环遍历，这是因为对象的键没有顺序，所以循环遍历是不可预测的。在Angular 1中是支持这种语法的，但是在Angular 2中被认为是一个错误，不再支持。解决方法是使用管道(pipe)来实现循环遍历对象的功能。然而，目前还没有实现这样的管道，所以需要采用一种变通的方法来实现对象的循环遍历。

下面是一个可以迭代对象键的小例子：

组件代码：

import { Component } from 'angular2/core';
@Component({
  selector: 'component',
  templateUrl: `
    
    
      
  • {{key}}:{{myDict[key]}}
    • 
    

  `
})
export class Home {
  myDict: Dictionary;
  constructor() {
    this.myDict = {'key1':'value1','key2':'value2'};
  }
  keys(): Array {
    return Object.keys(this.myDict);
  }
}
interface Dictionary {
  [index: string]: string;
}

以上代码通过定义一个keys()方法，该方法返回对象的所有键，然后在模板中使用*ngFor指令和该方法来实现对象的循环遍历。

然而，有用户反馈在对象的键为数字类型，值为字符串类型时，Angular会抛出错误“expression has changed after it was checked”。目前还没有解决这个问题的办法。

最后，有用户提到在最新的Angular 7版本中有一个简单的解决办法，请参考bersling的答案。

0