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

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

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

<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

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

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

我使用 onClick router.navigate() 从我的主要组件路由到该组件。这样路由，不知道为什么，似乎路由正确到目的地，它会创建任何静态labels/buttons/etc。但不依赖于 *ngFor（即使 *ngIf 也不起作用）。

总而言之，使用 [nsRouterLink] 代替 router.navigate() 进行导航修复了我的代码。

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

Does Nativescript using Angular2 need special a *ngFor?

angular

nativescript

ngfor