Question

我使用Angular2在NativeScript中遇到ListView问题。

在我的指令中我有对象数组

export class Room {
constructor(
    public name: string,
    public tag: string
    ){ }
}

import { Page } from "ui/page";
import { Component, OnInit, EventEmitter, Output, ChangeDetectionStrategy } from '@angular/core';
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

@Component({
    moduleId: module.id,
    selector: 'rooms-list',
    templateUrl: "./template.html",
    providers: [RoomService],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class RoomsListComponent implements OnInit {

    public items: Array<Room> = [];

    listLoaded = false;

    load() {
        for (let i = 0; i < 200; i++) {
                this.items.push(
                    new Room("room " + i, "tag " + i)
                );

            }
    }
    ngOnInit(): void {
        this.load();
    }
    onTap(name){
        console.log('taped: '+name);
    }
}

在我的模板中我使用ListView

<ListView [items]="items" id="roomsList">
    <template let-item="item">
        <StackLayout>
            <Label [text]='"[" + item.tag +"] " + item.name'></Label> 
        </StackLayout>
    </template>
</ListView>

但看起来模板标签不存在，列表只包含 [object Object]元素。

Answer 1

在^.*?\| consume everything up until the first pipe (.*?)| match and consume everything between the first and second pipes .*$ consume the remainder of the line中使用moduleId: module.id时，您只需要提供@Component的名称而不包含任何目录。使用moduleId可以在当前目录中查找任何Url，因此您不再需要指定绝对路径。只需执行以下操作：

templateUrl

可以在this主题中找到更多信息，您还可以查看官方的NAtiveScript ng示例here。

Answer 2

以下适用于NativeScript / Angular 5，我认为也应该在Angular 2中。变化：

<StackLayout>

为：

<StackLayout (tap)="onTap(item)">

和

onTap(name){
    console.log('taped: '+name);
}

为：

onTap(item){
    console.dir(item); // So item is a Room object
}

Angular 5也需要ng-template而不是模板。

[Angular2] [NativeScript]模板标记在ListView中不起作用

2 个答案: