Error when charts are wrapped in an ngIf "ERROR TypeError: Cannot read property '_ngKey' of undefined"

[tklein243]

When charts are wrapped in an ngIf they throw an ERROR TypeError: Cannot read property '_ngKey' of undefined error.

component.tns.ts

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    private count: 15;
    public favoriteFruits = null

    ngOnInit(): void {
        setInterval(() => {
            this.favoriteFruits = new ObservableArray([
                { type: "🍎", count: 7 },
                { type: "🍌", count: 15 },
                { type: "🍍", count: this.count++ },
                { type: "🍒", count: 30 },
                { type: "🍇", count: 16 }
            ]);

        }, 1000)
    }
}

component.tns.html

<GridLayout rows="*, *" *ngIf="favoriteFruits">
    <RadCartesianChart row="0" id="cartesianChart" style="height: 100%">
        <CategoricalAxis tkCartesianHorizontalAxis labelSize="40"
            labelMargin="10"></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>

        <BarSeries tkCartesianSeries [items]="favoriteFruits"
            categoryProperty="type" valueProperty="count" seriesName="Bar">
        </BarSeries>
        <Palette tkCartesianPalette seriesName="Bar">
            <PaletteEntry tkCartesianPaletteEntry fillColor="#db5560"
                strokeColor="#bb1616"></PaletteEntry>
        </Palette>
    </RadCartesianChart>
</GridLayout>

[mhtghn]

Same happened to me since updating to nativescript-ui-chart 7.0.0. A workaround for me was to use visibility instead of ngIf

In your case it will give something like this

<GridLayout rows="*, *" [visibility]="favoriteFruits ? 'visible' : 'collapse'">
    <RadCartesianChart row="0" id="cartesianChart" style="height: 100%">
        <CategoricalAxis tkCartesianHorizontalAxis labelSize="40"
            labelMargin="10"></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>

        <BarSeries tkCartesianSeries [items]="favoriteFruits"
            categoryProperty="type" valueProperty="count" seriesName="Bar">
        </BarSeries>
        <Palette tkCartesianPalette seriesName="Bar">
            <PaletteEntry tkCartesianPaletteEntry fillColor="#db5560"
                strokeColor="#bb1616"></PaletteEntry>
        </Palette>
    </RadCartesianChart>
</GridLayout>

[oskarinn]

I am having the same problem with angular implementation. I put the chart around an ngFor and produced the same error.

I solved this problem by returning from version 7.1.1 to 6.0.0 of the nativescript-ui-chart plugin. Then I made npm dedupe to eliminate duplicate references. This works for me.

If you do not need complement support with the dark mode of iOS or Android, then it may work for you too.

I will wait for them to implement the fix proposed by @ashvinders here (by the way it worked for me too).

[radiohe4d]

+1

[NickIliev]

Guys, you can't use ANgular structural directives for a native mobile component at least not in this case. The Angular is the top abstraction and is rendering its visual tree on top of the NativeSciprt and the mobile layers. SO when using structural directives from the top layer to manipulate native mobile components from the bottom layer it could cause some side effects.

[ashvinders]

Hi Nick,

I don't agree with your statement that a native script component cannot use angular structural directives. If your platform claims to allow developers to use angular in a native mobile application then ngif and ngfor are basic angular fundamentals, they need to be supported. If not now then in subsequent release. Simply stating it doesn't and closing the issue seems unreasonable to me.

Cheers, Ash

On Thu, 6 Feb. 2020, 11:11 pm Nick Iliev, notifications@github.com wrote:

Guys, you can't use ANgular structural directives for a native mobile component at least not in this case. The Angular is the top abstraction and is rendering its visual tree on top of the NativeSciprt and the mobile layers. SO when using structural directives from the top layer to manipulate native mobile components from the bottom layer it could cause some side effects.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NativeScript/nativescript-ui-feedback/issues/1332?email_source=notifications&email_token=AMSKHYWFS5KJURHBXFG4HTDRBP46VA5CNFSM4KHFND2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEK677AI#issuecomment-582877057, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMSKHYTJBNCCXLPEU42FUNTRBP46VANCNFSM4KHFND2A .

[NickIliev]

@ashvinders the framework is open-sourced and we are accepting any community-driven features and enhancements. Feel free to join the contributors and implement the full support for Angular structural directives in the context of chart, listview, and/or any other mobile components.

Here are some sources related to the requirements and the workflow for contributors:

https://www.nativescript.org/contribute https://www.nativescript.org/community https://www.nativescript.org/blog/nativescript-first-time-contribution-contest-continued-and-extended

[ashvinders]

I would love to contribute to the chart code base however I was unable to locate it on GitHUB or find any links to it. I've already established which line is causing the issue in which source file and I am happy create a pull request for review if you are able to let me know where the repository is.

On Mon, Feb 10, 2020 at 8:03 PM Nick Iliev notifications@github.com wrote:

@ashvinders https://github.com/ashvinders the framework is open-sourced and we are accepting any community-driven features and enhancements. Feel free to join the contributors and implement the full support for Angular structural directives in the context of chart, listview, and/or any other mobile components.

Here are some sources related to the requirements and the workflow for contributors:

https://www.nativescript.org/contribute https://www.nativescript.org/community

https://www.nativescript.org/blog/nativescript-first-time-contribution-contest-continued-and-extended

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NativeScript/nativescript-ui-feedback/issues/1332?email_source=notifications&email_token=AMSKHYWBG3Y5CPOOCOMQSRDRCEJ55A5CNFSM4KHFND2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELHXKVI#issuecomment-584021333, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMSKHYX7TOL2H53MIWWPEHTRCEJ55ANCNFSM4KHFND2A .

[messaoudi-mounir]

+1

[justintoth]

+1

[sneaker102]

+1 Any updates ?

[justintoth]

+1