ОШИБКА TypeError: невозможно прочитать свойство forEach из неопределенного в Angular - PullRequest
Новая
       152

ОШИБКА TypeError: невозможно прочитать свойство forEach из неопределенного в Angular

2 голосов
/ 14 июля 2020
• 1000 В моем коде есть ошибки, но я получаю эту ошибку на странице google chrome.

Это мой DashboardComponent.ts. 

import { Component, OnInit } from '@angular/core';
import {Stockmodel} from '../model/stockmodel';
import { StockService } from '../services/stock.service';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import * as Highcharts from 'highcharts';
import { debug } from 'util';

@Component({
 selector: 'app-dashboard',
 templateUrl: './dashboard.component.html',
 styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
 addForm: FormGroup;
 url: string = 'http://localhost:44311/api/GetStockData';
 Stocks:Stockmodel[];
 PortfolioStocks : Stockmodel[];
 constructor(private stockService: StockService, private formBuilder: FormBuilder) {
 }
ngOnInit() {
 // this.GetActiveStocks();
 this.GetDashboardPortfolioData();
 }
 GetDashboardPortfolioData()
 {
 this.stockService.GetStocks("http://localhost:44311/api/GetDashboardPortfolioData")
 .toPromise().then(data => {
 return this.PortfolioStocks = data;
 });
 }
 public profitLossChart: any = {
    chart: {
    type: 'pie',
    },
    title: {
    text: 'Profit/Loss Chart'
    },
    credits: {
    enabled: false
    },
    series: [],
   }
 
    GetProfitLossChart(){
    let totalInvestment:number=0;
    let totalGain:number=0;
    this.PortfolioStocks.forEach(row => {
    totalInvestment+=row.TotalInvested;
    totalGain += row.CurrentValue;
    });
    this.GetTopGainerChart();
    this.GetTopLoserChart();
    this.profitLossChart.series =[{
    data: [{
    name: 'Total Investment#',
    y: totalInvestment,
    },
    {
    name: 'Current Value',
    y: totalGain,
    }]
    }]
    Highcharts.chart('containerProfitLoss', this.profitLossChart);
 }
 public topGainerChart: any = {
 chart: {
 type: 'line',
 },
 title: {
 text: 'Top Gainer'
 },
 credits: {
 enabled: false
 },
 xAxis: {
 categories: [],
 },
 yAxis: {
 title: {
 text: ''
 },
 },
 series: [],
}
 GetTopGainerChart() {
 let length = this.PortfolioStocks.length;
 if (length > 0) {
 this.stockService.GetGainerLoserStockData('http://localhost:44311/api/GetGainerLoserStockData', this.
PortfolioStocks[length - 1].StockId, "Monthly")
 .toPromise().then(data => {
    const stockData = [];
    const dates = [];
    data.forEach(row => {
    const temp_row = [
    row.High,
    ];
    dates.push(row.Date);
    stockData.push(row.High);
    });
    var dataSeries = [];
    for (var i = 0; i < stockData.length; i++) {
    dataSeries.push(
    stockData[i]
    );
    }
    this.topGainerChart.series = [{ data: dataSeries, name:
   this.PortfolioStocks[length - 1].StockId }]
    this.topGainerChart.xAxis.categories = dates
    Highcharts.chart('topGainerChart', this.
   topGainerChart);
    },
    error => {
    console.log('Something went wrong.');
    });
    }
    }
    public topLoserChart: any = {
    chart: {
    type: 'line',
    },
    title: {
        text: 'Top Loser'
        },
        credits: {
        enabled: false
        },
        xAxis: {
        categories: [],
        },
        yAxis: {
        title: {
        text: ''
        },
        },
        series: [],
        }
        GetTopLoserChart() {
        let length = this.PortfolioStocks.length;
        if (length > 0) {
        this.stockService.GetGainerLoserStockData('http://localhost:44311/api/GetGainerLoserStockData',
       this.PortfolioStocks[0].StockId, "Monthly")
        .toPromise().then(data => {
        const stockData = [];
        const dates = [];
        data.forEach(row => {
        const temp_row = [
        row.High,
        ];
        dates.push(row.Date);
 stockData.push(row.High);
 });
 var dataSeries = [];
 for (var i = 0; i < stockData.length; i++) {
 dataSeries.push(
 stockData[i]
 );
 }
 this.topLoserChart.series = [{ data: dataSeries,
name: this.PortfolioStocks[0].StockId }]
 this.topLoserChart.xAxis.categories = dates
 Highcharts.chart('topLoserChart', this.topLoserChart);
 },
 error => {
 console.log('Something went wrong.');
 });
 }
 }
}

Ответы [ 3 ]

2 голосов
/ 14 июля 2020

Я не уверен, но у вас нет надежного чека на data, который возвращается обещанием. Это где ошибка? если data не определено, data.forEach выдаст ошибку.

1 голос
/ 14 июля 2020

попробуйте отладить 

.toPromise().then(data => {
    //console.log(data)
)}

возможно тело ответа что-то внутри, например 

{
  data: {},
  status: 200
}

, поэтому вам нужно получить данные через: 

.toPromise().then(data => {
   //console.log(data?.data)
)}
0 голосов
/ 14 июля 2020

Вы устанавливаете PortfolioStocks в методе asyn c, это означает, что вы не уверены, установлено ли значение в тот момент, когда вы выполняете forEach.

Я советую вам используйте подход BehaviorSubject и rxjs. 

...
PortfolioStocks = new BehaviorSubject<Arry<Stockmodel>([]);
...
 GetDashboardPortfolioData() {
     this.stockService.GetStocks("http://localhost:44311/api/GetDashboardPortfolioData")
         .toPromise().then(data => {
             this.PortfolioStocks.next(data);
          });
 }
...
    this.PortfolioStocks.pipe(filter(portfolioStocks => Array.isArray(portfolioStocks)))
        .subscribe(portfolioStocks => {
            portfolioStocks.forEach(row => {
                totalInvestment+=row.TotalInvested;
                totalGain += row.CurrentValue;
            });
        })
...