1

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

@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 数组。尝试使用 {{}} 推断它，但这样做会出错。

4

3 回答 3

1

这个问题的解决方案是路由器的错误实现。

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

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

于 2016-07-11T13:55:42.547 回答
0

我查看了给定的示例，发现您应该使用 ，当新值被推送到数组中时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")
    }
}
于 2016-07-08T12:16:56.187 回答
-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中显示的相同示例

于 2016-07-08T10:35:04.413 回答