时间戳

首页 > 解决方案 > 将 ngFor 与 NativeScript 一起使用

html - 将 ngFor 与 NativeScript 一起使用

问题描述

我正在尝试在我的 NativeScript Angular 项目中使用 *ngFor ，但不断收到一个错误，只是说

错误：错误{

所以我很困惑，真的不知道我哪里出错了。

这是我的模型，leagues.ts：

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

这是我在我的声明中声明它的地方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"
        };
}

然后这就是我在我的地方leagues.component.html：

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

任何帮助将不胜感激，谢谢！

标签： htmlangularnativescript

解决方案

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"
        }
]

推荐阅读