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 の Web サイトでドキュメントを確認したところ、非推奨の古いバージョン (let の代わりに # を使用) があり、どちらも機能しないようです。私の間違いを教えていただければ幸いです。また、可能であれば、Nativescript の Web サイト以外の場所を教えていただけると助かります。

最初と最後のラベルが正しく表示されていることは言うまでもありません。

[編集] *ngFor="let item of items items 配列を認識していないようです。{{}} で外挿しようとしましたが、エラーが発生しました。

4

3 に答える 3

1

この問題の解決策は、ルーターの不適切な実装でした。

onClick router.navigate() を使用して、メイン コンポーネントからこのコンポーネントにルーティングしていました。このようにルーティングすると、理由はわかりませんが、宛先に正しくルーティングされているように見え、静的なラベル/ボタン/その他が作成されます。ただし、*ngFor に依存するものはありません (*ngIf でさえ機能しません)。

要約すると、router.navigate() の代わりにナビゲーションに [nsRouterLink] を使用すると、コードが修正されました。

于 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 に答える