Я хочу отобразить приведенные ниже данные из Firebase

{
   "-KBN9O_qqz-nZ9tPWFdM":{
      "createdAt":1456399292790,
      "isActive":true,
      "name":"Hero 1"
   },
   "-KBN9gjJw1ZlMgt9pVsl":{
      "createdAt":1456399371220,
      "isActive":true,
      "name":"Hero 2"
   },
   "-KBN9hYI4vYAsyh5k1lX":{
      "createdAt":1456399374548,
      "isActive":true,
      "name":"Hero 3"
   }
}

Например, при выполнении учебника angular.io Tour of Heroes

<li *ngFor="#hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

Таким образом, идентификатор героя должен отображаться, например, -KBN9hYI4vYAsyh5k1lX и имя героя должно отображаться, например, hero 3


Я провел некоторое исследование и наткнулся на это решение stackoverflow от @Thierry Templier access ключ и значение объекта с использованием * ngFor

(1) Это правильное решение моей проблемы?

(2) Есть ли более простое решение этой проблемы, потому что я чувствую, что разработчики, использующие Angular2, могут отображать такие данные json.

24
choopage - Jek Bao 26 Фев 2016 в 11:57

3 ответа

Лучший ответ

Для этого вам необходимо реализовать собственный канал. ngFor поддерживает только массив, но не объект.

Эта труба будет выглядеть так:

@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;
  }
}

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

<span *ngFor="#entry of content | keys">           
  Key: {{entry.key}}, value: {{entry.value}}
</span>

См. Этот вопрос для получения более подробной информации:

42
Community 23 Май 2017 в 10:31

Вы можете поместить ключи в массив и ng-повторить ключи.

export class IterateOverObject {
    public arrayOfKeys;

    @Input heros;
    constructor() {
        this.arrayOfKeys = Object.keys(this.heros);
    }
}

<li *ngFor="#key of arrayOfKeys">
  <span class="badge">{{key}}</span> {{heros[key].name}}
</li>

Мне это кажется простым .. Дополнительная информация находится здесь

7
Siva 26 Фев 2016 в 09:09

Идентификатор Firebase называется $ .key . Кроме того, # теперь изменено на let . Это сработает для вас:

<li *ngFor="let hero of heroes">
  <span class="badge">{{hero.$key}}</span> {{hero.name}}
</li>
5
Andreas Hopen 26 Июл 2016 в 23:06