Question

通过* ngFor调用模板时，无论多么简单，它都不会呈现。

component.html：

<Label text="hello world""></Label>

container.html：

<StackLayout>
    <GridLayout *ngFor="let obj of objs">
        <!-- WORKS: -->
        <Label text="hello world"></Label>
        <!-- DOES NOT WORK: -->
        <ns-component></ns-component>
    </GridLayout>
</StackLayout>

当使用，（简单的非模板Label）下的代码片段时，对于3个对象的数组，我看到三行“ hello world”。但是，当调用模板而不是简单的Label时，不会呈现任何内容。

Answer 1

确保已在相应的模块中注册了组件。

例如

使用选择器ns-component

创建组件

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

@Component({
    selector: "ns-component",
    moduleId: module.id,
    template: '<Label text="ns-component: Some Content"></Label>',
    styleUrls: ['./item.component.css']
})
export class ItemComponent  { }

然后在加载的模块中注册组件

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";

import { ItemComponent } from "./item.component"; // HERE

@NgModule({
    imports: [
        NativeScriptCommonModule,
        HomeRoutingModule,
        NativeScriptFormsModule
    ],
    declarations: [
        HomeComponent,
        ItemComponent // HERE
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }

最后根据需要使用 * ngFor 结构指令。

<StackLayout>
    <GridLayout rows="100" *ngFor="let obj of [1, 2, 3, 4]" class="cell">
        <ns-component></ns-component>
    </GridLayout>
</StackLayout>

Playground app demonstrating the above here.

NativeScript：不呈现简单模板

1 个答案: