在 Angular 2 模板中创建 for/in 循环答案

【问题标题】：Creating a for/in loop in an Angular 2 template在 Angular 2 模板中创建 for/in 循环
【发布时间】：2017-12-18 13:32:31
【问题描述】：

有没有办法在 Angular 2 模板中迭代静态（Typescript）类的属性？换句话说，我想要一个 for/in 循环，它迭代一个对象而不是一个数组（所以普通的 *ngFor 不起作用）。据我所知，Angular 2 中没有指令可以做到这一点，所以我想知道最好的方法是什么？

由于与模块导入有关的原因，必须将对象作为静态类引入，并且必须导入该数据，然后在另一个 Angular 组件的模板中迭代。

静态类如下所示：

class staticClassExample {
  static string1 = ""
  static string2 = ""
  static string3 = ""
}

这被导入到 Angular 2 组件中：

import { staticClassExample } from './example';

@Component({
   template: '
 // LOOP NEEDS TO GO HERE
'})

export class Example {

  dataToIterateOver: any;

  constructor (private _myService: MYSERVICE) 
    {
       this.dataToIterateOver = staticClassExample;
    }
}

【问题讨论】：

您好，例如，创建一个空数组并将该静态类的每个属性推送到该数组中怎么样。 arrEmpty.push(exambleObj.string1)
你能在静态函数中返回一对数组吗？ [{k: string1, v: ""}...]
@lilezek 我不能在类中使用方法，这就是为什么它是静态的（它实际上从未被调用或运行）。
@ashley 我想我可以在构造函数中使用常规的 for-in 循环，并将数据提取到数组中。我只是想知道是否有另一种方法可以做到这一点，特别是在 HTML 中？但你是对的，我可能应该这样做，谢谢！
@JazzyGreen，my solution 有帮助吗？您不需要数组来迭代对象属性

标签： angular typescript for-in-loop

【解决方案1】：

ngFor 指令适用于可迭代对象。您可以通过实现[Symbol.iterator] 方法将任何对象转换为可迭代对象，该方法将返回ngFor 使用的迭代器。 Here is the plunker 演示了这一点和代码：

class A {
  static a = 3;
  static b = 4;

  static [Symbol.iterator] = function*() {
    yield ['a', this.a];
    yield ['b', this.b];
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <div *ngFor="let p of cls; let i = index;">
        <span>Property: {{p[0]}} and value: {{p[1]}}</span>
    </div>
  `,
})
export class App {
  name:string;
  cls = A;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

【讨论】：

我认为这不起作用，因为它必须适用于静态类，而不是类的实例。
是的，现在会了，刚刚添加了static

【解决方案2】：

改变

this.dataToIterateOver = staticClassExample;

到

Object.keys(this.dataToIterateOver).map((k) => {key: k, value: this.dataToIterateOver[k]});

它为您的模板提供了一组键、值对，您现在可以使用 ngFor 对其进行迭代。

【讨论】：