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

Question

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

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

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

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

        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 для массива stati c возвращает следующее - правильный формат :

(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)

Массив Dynami c возвращает следующее - Неверный формат:

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 l oop и как я могу получить свой Dynami c массив (с использованием foreach) в том же формате, что и массив stati c?

Answer 1

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

    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>

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

Answer 2

В версии stati c вы используете

this.products

, а в версии Dynami c вы используете

this.productData

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

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