Question

我正在创建这个移动应用，我必须列出一些标签。代码如下所示：

@Component({
    selector: 'code-m',
    template: `
                <StackLayout dock="top" orientation="vertical" style="height:90%;" backgroundColor="lightgray">
                    <label text="Code Methods" style="background-color:red;"></label>
                    <Label *ngFor="let item of items" [text]="item"></Label>
                    <label text="test" style="background-color:blue;"></label>
                </StackLayout>
        `
})
export class CodeMethodsComponent{
    public items:Array<string> = [];

    constructor(){
        this.items.push("Default");
        this.items.push("Validation");
        this.items.push("Filter");
        this.items.push("Business");
        this.items.push("Provisional");
        console.log(this.items);
        console.log("test")
    }
}

带有* ngFor的标签根本不显示。像循环这样的感觉根本不起作用。我检查了Nativescript网站上的文档，它似乎有旧的已弃用版本（使用＃而不是let），这两种版本都不起作用。如果你可以指导我完成我的错误并且如果可能的话建议我一个地方（除了Nativescript的网站）来获得帮助，我将非常感激。

值得一提的是，第一个和最后一个标签正确显示。

[编辑] 似乎*ngFor="let item of items它无法识别items数组。尝试使用{{}}进行外推，但是这样做会出错。

Answer 1

此问题的解决方案是路由器的错误实施。

我使用onClick router.navigate（）从我的主要组件路由到此组件。以这种方式路由，不知道为什么，似乎正确地路由到目的地，它将创建任何静态标签/按钮/等。但没有任何依赖于* ngFor（即使* ngIf也不会工作）。

总之，使用[nsRouterLink]进行导航而不是router.navigate（）修复了我的代码。

Answer 2

我查看了给定的示例，发现您应该使用ChangeDetectionStrategy.OnPush，以便在数组中推送新值时允许view触发所有更改。您还可以查看下面的示例。

app.component.html

<StackLayout dock="top" orientation="vertical" style="height:90%;" backgroundColor="lightgray">
        <label text="Code Methods" style="background-color:red;"></label>
        <Label *ngFor="let item of items" [text]="item"></Label>
        <label text="test" style="background-color:blue;"></label>
</StackLayout>

app.component.ts

import {Component, ChangeDetectionStrategy} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
    public items:Array<string> = [];

    constructor(){
        this.items.push("Default");
        this.items.push("Validation");
        this.items.push("Filter");
        this.items.push("Business");
        this.items.push("Provisional");
        console.log(this.items);
        console.log("test")
    }
}

Answer 3

我不确定您的数据在列表中的样子，但请尝试使用重复标签：

<Label *ngFor="#item of items" [text]="#item"></Label>

或

<Label *ngFor="#item of items" [text]="#item.someproperty"></Label>

更新：此处显示的是官方文档中的相同示例 https://docs.nativescript.org/angular/ui/list-view.html#using-an-item-template

使用Angular2的Nativescript是否需要特殊的a * ngFor？

3 个答案: