Как перебирать ключи объектов с помощью * 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 

Обновить

В 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

  • BehaviorSubject vs Observable?
  • Угловое: не удается найти Promise, Map, Set и Iterator
  • Нет заголовка «Access-Control-Allow-Origin» в приложении Angular 2
  • Как вызвать функцию с другого controllerа в angularjs?
  • В чем разница между декларациями, поставщиками и импортом в NgModule
  • Как связать Http-вызовы в Angular2?
  • Угловая привязка HTML
  • Разница между HTTP и HTTPClient в угловом 4?
  • Точки останова в Dartium не работают
  • В RC.1 некоторые стили нельзя добавить с помощью синтаксиса привязки
  • Как использовать переменную для определения templateUrl в Angular2
  • Interesting Posts

    Обновление юниверса Windows 10 Pro заставляет автоматически перезагружать новые обновления

    C # передача дополнительных параметров обработчику событий?

    Постоянный указатель vs Указатель на константу

    Параметры «var» устарели и будут удалены в Swift 3

    Iptables обрабатывает трафик с разных хостов по-разному, несмотря на правила

    Как определить, поддерживает ли мой SSD (Samsung UM41) команду TRIM?

    Как открыть Google Play Store прямо из приложения для Android?

    Изменение ViewPager для включения бесконечной прокрутки страницы

    Как интегрировать шаги Samsung Gear в приложении Android?

    Преобразование строки в массив JSON

    Microsoft Visual Studio: opendir () и readdir (), как?

    Как скопировать объект в Java?

    В чем разница между библиотекой пользовательского контроля и библиотекой пользовательского контроля?

    Разница в типе между использованием и использованием ключевого слова Set

    Как получить CellRow, когда есть ItemEvent в JComboBox внутри ячейки

    Давайте будем гением компьютера.