Как перебирать ключи объектов с помощью * ngFor?

Я копался и узнал, что я могу использовать следующее для использования * ngFor над объектом:

...

где ObjNgFor труба:

 @Pipe({ name: 'ObjNgFor', pure: false }) export class ObjNgFor implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value).map(key => value[key]); } } 

Однако, когда у меня есть такой объект:

 { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } } по { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } } по { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } } 

Я не совсем уверен, как я могу извлечь ‘propertyA’ и ‘propertyB’, чтобы он был доступен из директивы * ngFor. Есть идеи?

ОБНОВИТЬ

Я хочу сделать следующий HTML:

  
{{SOMETHING}}:{{obj.description}}

Где что-то будет равно propertyA и propertyB (так структурируется объект). Таким образом, это приведет к:

 propertyA:this is the propertyA propertyB:this is the propertyB 

3 Solutions collect form web for “Как перебирать ключи объектов с помощью * ngFor?”

Обновить

В 6.1.0-beta.1 KeyValuePipe был введен https://github.com/angular/angular/pull/24319

 
{{ item.key }} - {{ item.value }}

Пример плунжера

Предыдущая версия

Вы можете попробовать что-то вроде этого

 export class ObjNgFor implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value).map(key => Object.assign({ key }, value[key])); } } 

И затем на вашем шаблоне

  
{{obj.key}} - {{obj.description}}

Plunker

Или вместо создания канала и передачи объекта в * ngFor, просто передайте Object.keys(MyObject) в * ngFor. Он возвращает то же, что и труба, но без хлопот.

В файле TypeScript:

 let list = Object.keys(MyObject); // good old javascript on the rescue 

На шаблоне (html):

 *ngFor="let item of list" 

Просто верните ключи из трубы вместо значений, а затем используйте клавиши для доступа к значениям:

( let вместо # в бета-версии.17)

 @Pipe({ name: 'ObjNgFor', pure: false }) export class ObjNgFor implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value)//.map(key => value[key]); } } 
 @Component({ selector: 'my-app', pipes: [ObjNgFor], template: ` 

Hello

{{key}}:{{objs[key].description}}
`, }) export class AppComponent { objs = { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } }; }
по @Component({ selector: 'my-app', pipes: [ObjNgFor], template: `

Hello

{{key}}:{{objs[key].description}}
`, }) export class AppComponent { objs = { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } }; }
по @Component({ selector: 'my-app', pipes: [ObjNgFor], template: `

Hello

{{key}}:{{objs[key].description}}
`, }) export class AppComponent { objs = { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } }; }

Пример Plunker

См. Также Выбор на основе enums в Angular2

  • Угловой: условный class с * ngClass
  • ПРЕДУПРЕЖДЕНИЕ: очистка небезопасного значения значения стиля
  • Как перезагрузить текущий маршрут с помощью углового маршрутизатора 2
  • jQuery не определен в bootstrap-sass
  • Angular2 Tutorial (Tour of Heroes): Не удается найти модуль 'angular2-in-memory-web-api'
  • $ применить уже выполненную ошибку
  • Как использовать переменную для определения templateUrl в Angular2
  • Как использовать фильтр в controllerе?
  • angular2: Ошибка: TypeError: невозможно прочитать свойство «...» неопределенного
  • PDF Blob не показывает контент, Angular 2
  • Импорт lodash в приложение углового2 +
  • Давайте будем гением компьютера.