Question

有没有办法在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;
    }
}

Answer 1

ngFor指令适用于iterables。您可以通过实现将返回[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}`
  }
}

Answer 2

更改

this.dataToIterateOver = staticClassExample;

到

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

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

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

2 个答案: