Как динамически заполнить массив в Typescript для диаграммы ngx?

Я использую библиотеку диаграмм ngx для отображения гистограммы. Он отлично работает, когда я использую статический массив, но когда я пытаюсь заполнить его динамически, он не работает.

Ниже приведены мои коды:

Примечание. allProducts — это массив, возвращаемый из API, со списком itemName, AmountPaid, Date Purchase и т. д. Мне нужен только приведенный ниже массив с itemname и оплаченной суммой для заполнения гистограммы с помощью ngxChart.

Когда я использую этот статический массив, все работает нормально:

        this.products = [{
            "name": this.allProducts[0].itemName,
            "value": this.allProducts[0].AmountPaid
        },
            {
                "name": this.allProducts[1].itemName,
                "value": this.allProducts[1].AmountPaid
            }
            ,
            {
                "name": this.allProducts[2].itemName,
                "value": this.allProducts[2].AmountPaid
            }
            ,
            {
                "name": this.allProducts[3].itemName,
                "value": this.allProducts[3].AmountPaid
            }
            ,
            {
                "name": this.allProducts[4].itemName,
                "value": this.allProducts[4].AmountPaid
            }
            ,
            {
                "name": this.allProducts[5].itemName,
                "value": this.allProducts[5].AmountPaid
            }
        ];

Когда я пытаюсь создать его динамически, как показано ниже, он не возвращает массив в правильном формате:

        this.allProducts.forEach((item) => {
            this.productData.push({
                "name": item.itemName,
                "value": item.grossAmountPaid
            });
        })

Журнал console.log для статического массива возвращает приведенный ниже правильный формат:

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Car-SL-Monthly", value: 1000000}
1: {name: "Car-SL-Yearly", value: 1000000}
2: {name: "Car-RB-Monthly", value: 5000}
3: {name: "dsaf", value: 455}
4: {name: "Delivery Van", value: 500000}
5: {name: "Lorry", value: 1000000}
length: 6
__proto__: Array(0)

Динамический массив возвращает следующее: неправильный формат:

Array(6)
0: {name: "Car-SL-Monthly", value: 1000000}
1: {name: "Car-SL-Yearly", value: 1000000}
2: {name: "Car-RB-Monthly", value: 5000}
3: {name: "dsaf", value: 455}
4: {name: "Delivery Van", value: 500000}
5: {name: "Lorry", value: 1000000}
length: 6
__proto__: Array(0)

Что не так с моим циклом foreach и как я могу заставить мой динамический массив (используя foreach) иметь тот же формат, что и статический массив?


typescript angular ngx-charts
person avdeveloper    schedule 16.06.2020    source источник
comment
Что вы подразумеваете под правильным/неправильным форматом? Оба выхода идентичны по своим данным.   -  person Kaustubh Badrike    schedule 16.06.2020
comment
@KaustubhBadike Я согласен, но посмотрите на первую строку - кажется, у нее другой заголовок.   -  person avdeveloper    schedule 16.06.2020
comment
Возможно, вам стоит перестать полагаться на формат журналов вашей консоли.   -  person Kaustubh Badrike    schedule 17.06.2020

Ответы (2)


arrow_upward
1
arrow_downward

в вашем файле сценария типа ------


    charDataLoading: boolean ; // define a variable

    constructor(){
    this.chartDataLoading = true; // set variable value false 
    }
     ngOnInit(){
               this._createChartData();
    }
     private _createChartData(){
     this.allProducts.forEach((item) => {
                this.productData.push({
                    "name": item.itemName,
                    "value": item.grossAmountPaid
                });
            })
    this.chartDataLoading = false;
    }

Используйте chartDataLoading как переменную условия в вашем html файле

<div *ngIf="!chartDataLoading">
//put your chart canvas inside this div 
</div>

Надеюсь, это поможет

person Dewanshu    schedule 16.06.2020

arrow_upward
0
arrow_downward

В статической версии вы используете

это.продукты

и в динамической версии у вас есть

this.productData

Также, возможно, метод отправки массива не запускает обнаружение изменений. попробуйте что-нибудь подобное и дайте нам знать.

this.productData = this.allProducts.map((item) => ({
            "name": item.itemName,
            "value": item.grossAmountPaid
        }));
person K1laba    schedule 17.06.2020