ключ доступа и значение объекта с помощью * ngFor

Немного путают о том, как получить Key and Value объекта в угловом2, в то время как usng * ngFor для итерации над объектом. я знаю, в угловом 1.x есть синтаксис вроде

 ng-repeat="(key, value) in demo" 

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

 
  • {{key}}
demo = { 'key1': [{'key11':'value11'}, {'key12':'value12'}], 'key2': [{'key21':'value21'}, {'key22':'value22'}], }

здесь plnkr, где я пробовал то же самое: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

Я хочу, чтобы key1 и key2 динамически использовали * ngFor. Как его получить? я искал много нашел идею использования трубы, но как использовать, я не знаю. есть ли встроенная труба для того, чтобы делать то же самое в угловом2?

Object.keys в шаблоне и используйте его в *ngFor .

 @Component({ selector: 'app-myview', template: `
{{key + ' : ' + items[key]}}
` }) export class MyComponent { objectKeys = Object.keys; items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' }; constructor(){} }

Вы можете создать настраиваемый канал, чтобы вернуть список ключей для каждого элемента. Что-то вроде того:

 import { PipeTransform, Pipe } from '@angular/core'; @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { let keys = []; for (let key in value) { keys.push(key); } return keys; } } 

и используйте его так:

  {{key}}: {{c[key]}}  

редактировать

Вы также можете вернуть запись, содержащую как ключ, так и значение:

 @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { let keys = []; for (let key in value) { keys.push({key: key, value: value[key]}); } return keys; } } 

и используйте его так:

  Key: {{entry.key}}, value: {{entry.value}}  

Выработка ответа Тьерри на примере.

Для получения key and value из цикла * ngFor нет встроенной трубы или метода. поэтому мы должны создать пользовательский канал для того же самого. как сказал тьер, вот ответ с кодом.

** Класс pipe реализует метод преобразования интерфейса PipeTransform, который принимает входное значение и необязательный массив строк параметров и возвращает преобразованное значение.

** Метод преобразования необходим для трубы. Интерфейс PipeTransform определяет этот метод и направляет как инструменты, так и компилятор. Это необязательно; Угловой ищет и выполняет метод преобразования независимо. для получения дополнительной информации см. здесь

 import {Component, Pipe, PipeTransform} from 'angular2/core'; import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common'; @Component({ selector: 'my-app', templateUrl: 'mytemplate.html', directives: [CORE_DIRECTIVES, FORM_DIRECTIVES], pipes: [KeysPipe] }) export class AppComponent { demo = { 'key1': 'ANGULAR 2', 'key2': 'Pardeep', 'key3': 'Jain', } } @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { let keys = []; for (let key in value) { keys.push({key: key, value: value[key]}); } return keys; } } 

и часть HTML:

 
  • Key: {{key.key}}, value: {{key.value}}

Рабочий Plnkr http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview

обновить до RC

как было предложено пользователем6123723 (спасибо) в комментарии здесь, это обновление.

 
  • Key: {{key.key}}, value: {{key.value}}

@Marton имел важное возражение против принятого ответа на том основании, что труба создает новую коллекцию при каждом обнаружении изменений. Вместо этого я бы создал HtmlService, который предоставляет ряд функций утилиты, которые вид может использовать следующим образом:

 @Component({ selector: 'app-myview', template: `
{{i + ' : ' + items[i]}}
` }) export class MyComponent { items = {keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3'}; constructor(private html: HtmlService){} } @Injectable() export class HtmlService { keys(object: {}) { return Object.keys(object); } // ... other useful methods not available inside html, like isObject(), isArray(), findInArray(), and others... }

Другой подход заключается в создании директивы NgForIn которая будет использоваться как:

 
{{ key }}: {{ obj[key] }}

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

ngforin.directive.ts

 @Directive({ selector: '[ngFor][ngForIn]' }) export class NgForIn extends NgForOf implements OnChanges { @Input() ngForIn: any; ngOnChanges(changes: NgForInChanges): void { if (changes.ngForIn) { this.ngForOf = Object.keys(this.ngForIn) as Array; const change = changes.ngForIn; const currentValue = Object.keys(change.currentValue); const previousValue = change.previousValue ? Object.keys(change.previousValue) : undefined; changes.ngForOf = new SimpleChange(previousValue, currentValue, change.firstChange); super.ngOnChanges(changes); } } } 

Обновить

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

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

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

Если вы уже используете Lodash, вы можете сделать этот простой подход, который включает как ключ, так и значение:

 
  • {{key}}: {{demo[key]}}

В файле машинописных файлов:

 import * as _ from 'lodash'; 

и в экспортированном компоненте:

 _: any = _; 

Как и в последнем выпуске Angular (v6.1.0), Angular Team добавила новую встроенную трубу для того же имени, что и keyvalue pipe, чтобы помочь вам перебирать объекты, карты и массивы в common модуле углового пакета. Например –

 
Key: {{item.key}} and Value: {{item.value}}

Пример с рабочей вилкой

ознакомьтесь с этой информацией для получения более полезной информации –

Если вы используете Angular v5 или ниже или хотите достичь использования трубы, следуйте этому ответу

  • ключ доступа и значение объекта, используя ngfor

Спасибо за трубу, но мне пришлось внести некоторые изменения, прежде чем я смогу использовать ее в угловом 2 RC5. Изменена строка импорта труб, а также добавлен тип любого из них в инициализацию массива ключей.

  import {Pipe, PipeTransform} from '@angular/core'; @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value) { let keys:any = []; for (let key in value) { keys.push( {key: key, value: value[key]} ); } return keys; } } 

Ни один из ответов здесь не работал для меня из коробки, вот что сработало для меня:

Создайте pipes/keys.ts с содержимым:

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value:any, args:string[]): any { let keys:any[] = []; for (let key in value) { keys.push({key: key, value: value[key]}); } return keys; } } 

Добавьте в app.module.ts (ваш основной модуль):

 import { KeysPipe } from './pipes/keys'; 

а затем добавьте в массив объявлений объявлений примерно следующее:

 @NgModule({ declarations: [ KeysPipe ] }) export class AppModule {} 

Затем в вашем шаблоне просмотра вы можете использовать что-то вроде этого:

  

Вот хорошая ссылка, которую я нашел, если вы хотите прочитать больше.

Там действительно хорошая библиотека, которая делает это среди других хороших труб. Это называется ngx-pipe .

Например, клавиша pipe возвращает ключи для объекта, а значения pipe возвращают значения для объекта:

канал ключей

 
{{key}}

значение трубы

 
{{value}}

Не нужно создавать свой собственный канал 🙂

Вот простое решение

Вы можете использовать iteratorы машинописного текста для этого

 import {Component} from 'angular2/core'; declare var Symbol; @Component({ selector: 'my-app', template:`

Iterating an Object using Typescript Symbol


Object is :

{{obj | json}}

============================
Iterated object params are:
{{o}}
` }) export class AppComponent { public obj: any = { "type1": ["A1", "A2", "A3","A4"], "type2": ["B1"], "type3": ["C1"], "type4": ["D1","D2"] }; constructor() { this.obj[Symbol.iterator] = () => { let i =0; return { next: () => { i++; return { done: i > 4?true:false, value: this.obj['type'+i] } } } }; } }

http://plnkr.co/edit/GpmX8g?p=info

Из углового 6.1 вы можете использовать трубку с ключом :

 
Key: {{item.key}} and Value: {{item.value}}

Но у него неудобно сортировать полученный список по ключевому значению. Если вам нужно что-то нейтральное:

 @Pipe({ name: 'keyValueUnsorted' }) export class KeyValuePipe implements PipeTransform { transform(value: any, args: string[]): any { let keys = []; for (let key in value) { keys.push({ key: key, value: value[key]}); } return keys; } } 

Я думаю, что Object.keys – лучшее решение этой проблемы. Для тех, кто сталкивается с этим ответом и пытается выяснить, почему Object.keys дает им [‘0’, ‘1’] вместо [‘key1’, ‘key2’], предостерегающую историю – обратите внимание на разницу между ” of “и” in “:

Я уже использовал Object.keys, что-то похожее на это:

 interface demo { key: string; value: string; } createDemo(mydemo: any): Array { const tempdemo: Array = []; // Caution: use "of" and not "in" for (const key of Object.keys(mydemo)) { tempdemo.push( { key: key, value: mydemo[key]} ); } return tempdemo; } 

Однако вместо

 for (const key OF Object.keys(mydemo)) { 

Я нечаянно написал

 for (const key IN Object.keys(mydemo)) { 

который «работал» отлично, без ошибок и вернулся

 [{key: '0', value: undefined}, {key: '1', value: undefined}] 

Это стоило мне около 2 часов гуглинга и ругательства.

(похлопывает лоб)

Вы должны сделать это как сейчас, я знаю не очень эффективно, так как вы не хотите конвертировать объект, который вы получаете от firebase.

  this.af.database.list('/data/' + this.base64Email).subscribe(years => { years.forEach(year => { var localYears = []; Object.keys(year).forEach(month => { localYears.push(year[month]) }); year.months = localYears; }) this.years = years; }); 

изменить демо-тип на массив или выполнить итерацию по вашему объекту и нажать на другой массив

 public details =[]; Object.keys(demo).forEach(key => { this.details.push({"key":key,"value":demo[key]); }); 

и из html:

 

{{obj.key}}

{{obj.value}}

  • угловая ng-init альтернатива в угловом 2
  • Когда использовать интерфейс и модель в TypeScript / Angular2
  • Угловой 2 CLI огромный пакет поставщиков: как улучшить размер для prod?
  • Как получить доступ / обновить $ rootScope извне Угловой
  • кеширование результатов с помощью услуги angular2 http
  • Свойство 'map' не существует в типе 'Observable '
  • Как сделать простой asynchronous запрос JSONP в Angular 2?
  • Отладка и запуск Angular2 с помощью Visual Studio Code?
  • Разница между HTTP и HTTPClient в угловом 4?
  • Интеграция дизайна материалов Lite с помощью Angular2
  • AngularJS Upgrade (от 1.5 до 1.6.1.7) Делает привязку видимости области действия неопределенной
  • Interesting Posts

    wait_fences: не удалось получить ответ: Ошибка 10004003 – UIAlert БЕЗ UITextField присутствует

    Удалено содержимое папки winsxs и BSOD

    Строка ggplot2 дает «geom_path: каждая группа состоит только из одного наблюдения. Вам нужно настроить группу эстетики? “

    Блокнот «Блокнот ++» для переключения окна «Найти результат»

    Синтаксис запроса Mongoid OR

    Как получить доступ к переменным из разных classов в tkinter?

    Распознавание лиц в Android?

    Как установить обновления и завершить работу из командной строки?

    Как избежать больших if-утверждений и instanceof

    Восстановить открытые приложения, документы и состояние окна

    Статические и экземпляры с тем же именем?

    Удаленный рабочий стол на ПК с Windows 8.1 с высоким масштабированием DPI

    Печать на Dell V305W с компьютера Mac

    Как мне общаться с моим другом на ПК, делиться своим экраном и звуком игры, не смешивая их голос?

    Любая дешевая или бесплатная среда разработки там для программирования VB6?

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