Создание цикла for / in в шаблоне Angular 2

Есть ли способ перебрать свойства статического (Typescript) класса внутри шаблона Angular 2? Другими словами, мне нужен цикл 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;
    }
}

typescript angular for-in-loop
person JazzyGreen    schedule 13.07.2017    source источник
comment
Здравствуйте, а как насчет создания пустого массива и, например, помещения каждого свойства этого статического класса в этот массив. arrEmpty.push (exampleObj.string1)   -  person ashley    schedule 13.07.2017
comment
Можете ли вы вернуть в статической функции массив пар? [{k: строка1, v:} ...]   -  person lilezek    schedule 13.07.2017
comment
@lilezek Я не могу использовать методы внутри класса, поэтому он статичен (он никогда не вызывается и не запускается).   -  person JazzyGreen    schedule 13.07.2017
comment
@ashley Я мог бы использовать обычный цикл for-in внутри конструктора, как я полагаю, и извлекать данные в массив. Мне просто интересно, есть ли другой способ сделать это, в частности, в HTML? Но вы правы, я, наверное, просто должен это сделать, спасибо!   -  person JazzyGreen    schedule 13.07.2017
comment
@JazzyGreen, помогло ли мое решение? Вам не нужен массив для итерации свойств объекта   -  person Max Koretskyi    schedule 13.07.2017
comment
@Maximus Я просто пробую сейчас. Похоже, что это не работает, по-прежнему возникает та же ошибка ngFor (итерация по объекту). Впервые слышу о Symbol.iterator, выглядит круто, спасибо!   -  person JazzyGreen    schedule 13.07.2017
comment
вы можете создать плункер? давай попробуем заставить его работать, тоже можешь выложить свой tsconfig.json?   -  person Max Koretskyi    schedule 13.07.2017
comment
@JazzyGreen, я обновил свой ответ более подробной информацией и справочником по рабочему плункеру. Вы можете проголосовать за или принять мой ответ, если это помогло. Спасибо   -  person Max Koretskyi    schedule 13.07.2017

Ответы (2)


arrow_upward
2
arrow_downward

Директива ngFor работает с итерациями. Вы можете превратить любой объект в итерируемый, реализовав метод [Symbol.iterator], который вернет итератор, используемый ngFor. Вот плункер, который демонстрирует это и код:

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}`
  }
}
person Max Koretskyi    schedule 13.07.2017
comment
Я думаю, это не сработает, так как должно работать для статического класса, а не для экземпляра класса. - person lilezek; 13.07.2017
comment
да, сейчас будет, только что добавил static - person Max Koretskyi; 13.07.2017

arrow_upward
0
arrow_downward

Изменять

this.dataToIterateOver = staticClassExample;

to

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

который предлагает вашему шаблону массив пар ключ, значение, который теперь вы можете перебирать с помощью ngFor.

person lilezek    schedule 13.07.2017