не могу получить значение массива

Question

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

{…}
​
"-LsMm5EeM0DavWwNweBc": Object { adresse: "njkbj", commune: "Marcory", nom: "jjbjkb,", … }
​
"-LsMmBCOHZzkVL_LUwiQ": Object { adresse: "bjb", commune: "Marcory", nom: "bjhbhjh", … }
​
<prototype>: Object { … }

страница для обслуживания

 adresses: Adresse [] = [];
  adresseSubject = new Subject<Adresse[]>();

  constructor() { }

  emitAdresse(){
    this.adresseSubject.next(this.adresses);
  }


  getAdresse(){
    firebase.database().ref('adresse/' + firebase.auth().currentUser.uid )
      .on('value', (data)=>{
        this.adresses = data.val() ? data.val() : [];
        console.log();
        this.emitAdresse();
      });
  }

страница для страницы ts

adresses : Adresse[];
  adresseSubscription: Subscription;

  constructor(private adresseService: AdresseService,  private router: Router) {}

  ngOnInit(){
    this.adresseSubscription = this.adresseService.adresseSubject.subscribe(
      (adresses: Adresse[]) => {
        this.adresses = adresses;
      }
    );
    this.adresseService.getAdresse();
    this.adresseService.emitAdresse();
  }

Спасибо вам

Answer 1

То, что вы получаете, это объект, а не массив. Таким образом, у вас есть возможность использовать keyvalue pipe, как в другом ответе (с небольшой поправкой), или фактически создать массив из ответа.

Здесь используется keyvalue:

<ul>
  <li *ngFor="let item of data | keyvalue">
    {{ item.value.adresse }}
  </li>
</ul>

Или затем вы создаете массив из ответа:

adressArray = [];

getAdresse(){
  firebase.database().ref('adresse/' + firebase.auth().currentUser.uid )
    .on('value', (data) => {
       for (let key in data.val()) {
         this.adressArray.push({key, ...data.val()[key]})
       }
    });
}

С этим вы получаете массив объектов, гдекаждый объект будет выглядеть так:

{"key":"-LsMm5EeM0DavWwNweBc","adresse":"njkbj","commune":"Marcory","nom":"jjbjkb"}

Который вы можете затем повторить как:

<ul>
  <li *ngFor="let item of adressArray">
    {{item.adresse}}
  </li>
</ul>

Вот STACKBLITZ с обеими опциями: DEMO

Answer 2

В вашем компоненте страницы adresses будет Object, а не Array. Таким образом, чтобы выполнить эту работу, вы можете использовать keyvalue трубу с *ngFor

Вот, попробуй:

<ul>
  <li *ngFor="let item of adresses | keyvalue">
    {{ item.adresse }}
  </li>
</ul>