Массив не заполняется в первый раз

Question

Массивы supplypayment и supplyBrand не имеют значений в первый раз, когда эта функция вызывается

this.getSupply().subscribe (list => {
      let array = list.map(item =>{
        return {
          $key: item.key,
          ...item.payload.val()
        };
      });
      array.forEach(element => {
        this.supplypayment.push(element.payment);
        this.supplyBrand.push(element.BrandName);
      });

    }

. SupplyPayment и supplyBrand используются на диаграмме в консоли. но при повторном вызове одного и того же графа он работает правильно!

ngOnInit() {
    this.BarChart = new Chart('barChart2', {

      type: 'bar',
    data: {
     labels:this.x,
     datasets: [{
         label: 'Payment',
         data  :  this.serv.supplypayment,
         backgroundColor: [
             'rgba(255, 99, 132, 0.2)',
             'rgba(54, 162, 235, 0.2)',
             'rgba(255, 206, 86, 0.2)',
             'rgba(75, 192, 192, 0.2)',
             'rgba(153, 102, 255, 0.2)',
             'rgba(255, 159, 64, 0.2)'
         ],
         borderColor: [
             'rgba(255,99,132,1)',
             'rgba(54, 162, 235, 1)',
             'rgba(255, 206, 86, 1)',
             'rgba(75, 192, 192, 1)',
             'rgba(153, 102, 255, 1)',
             'rgba(255, 159, 64, 1)'
         ],
         borderWidth: 1
     }]
    }, 
    options: {
     title:{
         text:this.serv.supNamerep,
         display:true
     },
     scales: {
         yAxes: [{
             ticks: {
                 beginAtZero:true
             }
         }]
     }
    }
    });

    this.serv.supplypayment = [];
    this.serv.supplyBrand= []

  }

Answer 1

попробуйте это:

this.getSupply().subscribe (list => {
      this.supplypayments = list.map(item =>{
        return {
          $key: item.key,
          payment:item.payment,
          brandName:item.BrandName
        };
      });
}

Вам не нужно повторять это снова

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

<ul>
  <li *ngFor="let supplyPayment of supplypayments">
    {{supplyPayment.$key}} - {{supplyPayment.payment.something}} - {{supplyPayment.brandName}}
  </li>
</ul>

Answer 2

Если supplypayment и supplyBrand являются унифицированными (то есть неопределенными), то вот что происходит. Все ваши нажатия после getSupply ничего не делают, кроме как сгенерировать ошибки (потому что undefined.push is not a function). Но в конце ngOnInit у вас есть эти две строки:

    this.serv.supplypayment = [];
    this.serv.supplyBrand= []

, после которых они являются правильными массивами.

Вы должны

// initialize the arrays
supplypayment: number[] = []; // or is it string[], or any other type[]? 
supplyBrand: string[] = [];

//...

this.getSupply().subscribe(list => {
    const array = list.map(item => ({ ...item.payload.val() }); // you weren't using $key anyway

    this.supplypayment = array.map(item => item.payment);
    this.supplyBrand = array.map(item => item.BrandName);
}