CODEWITHSUNDEEP
htmlangularnativescript
rcarcia02
rcarcia02

Reputation: 977

Using ngFor with NativeScript

I'm trying to use *ngFor in my NativeScript Angular project but keep getting an error that just solely says

ERROR: ERROR {

so I'm very confused and don't really know where I went wrong.

Here's my model, leagues.ts:

export class Leagues {
    leagueName: string;
    totalLeagueSize: number;
    currentLeagueSize: number;
    schoolID: string;
    leagueClass: string;
}

Here's where I declare it in my leagues.component.ts:

public leagues: Leagues;

ngOnInit(): void { 
    this.leagues =
        {
            "leagueName": "Basketball",
            "totalLeagueSize": 20,
            "currentLeagueSize": 18,
            "schoolID": "AAA",
            "leagueClass": "basketballClass"
        },
        {
            "leagueName": "Football",
            "totalLeagueSize": 14,
            "currentLeagueSize": 14,
            "schoolID": "AAA",
            "leagueClass": "footballClass"
        },
        {
            "leagueName": "Soccer",
            "totalLeagueSize": 9,
            "currentLeagueSize": 10,
            "schoolID": "AAA",
            "leagueClass": "soccerClass"
        },
        {
            "leagueName": "Volleyball",
            "totalLeagueSize": 8,
            "currentLeagueSize": 10,
            "schoolID": "AAA",
            "leagueClass": "volleyballClass"
        },
        {
            "leagueName": "Dodgeball",
            "totalLeagueSize": 8,
            "currentLeagueSize": 10,
            "schoolID": "AAA",
            "leagueClass": "dodgeballClass"
        },
        {
            "leagueName": "Softball",
            "totalLeagueSize": 4,
            "currentLeagueSize": 5,
            "schoolID": "AAA",
            "leagueClass": "softballClass"
        };
}

and then here's where I have it in my leagues.component.html:

<Button *ngFor="let league of leagues" [ngClass]="league.leagueClass" [text]="league.leagueName" style="width: 95%; height: 15%; margin-top: 2%;" ></Button>

Any help would be greatly appreciated, thanks!

Upvotes: 0

Views: 404

Answers (1)

Vssunder
Vssunder

Reputation: 21

There are two things that are not correct in your code. At first You have to use interface to define the object.

The correct method in your case is:

export interface Leagues {
    leagueName: string;
    totalLeagueSize: number;
    currentLeagueSize: number;
    schoolID: string;
    leagueClass: string;
}

Secondly the way you initialized the array. Is should be done with objects inside the square brackets.

Example:

public leagues:Leagues[];
this.leagues = [
        {
            "leagueName": "Football",
            "totalLeagueSize": 14,
            "currentLeagueSize": 14,
            "schoolID": "AAA",
            "leagueClass": "footballClass"
        },
        {
            "leagueName": "Soccer",
            "totalLeagueSize": 9,
            "currentLeagueSize": 10,
            "schoolID": "AAA",
            "leagueClass": "soccerClass"
        }
]

Upvotes: 1

Related Questions