无法检索数组值答案

【问题标题】：can not retrieve the array value无法检索数组值
【发布时间】：2019-10-30 00:36:09
【问题描述】：

我想以表格形式收集我的地址表的元素，但不可能。这就是我在控制台中得到的内容

{…}

"-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();
  }

谢谢你

【问题讨论】：

标签： angular firebase ionic-framework

【解决方案1】：

你得到的是一个对象，而不是一个数组。因此，您可以选择像在其他答案中一样使用 keyvalue 管道（稍作修正），或者从响应中实际创建一个数组。

这里使用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

【讨论】：

【解决方案2】：

在您的页面组件中，adresses 将是 Object 而不是 Array。因此，为了完成这项工作，您可以使用 keyvalue 管道和 *ngFor

来，试试看：

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

【讨论】：