我正在尝试根据atype.name在ngfor loop内的andy.name值渲染6个自定义组件中的1个。这是我的开关语法:
<div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
<span [ngSwitch]="aType.Name">
{{aType.Name}} tab content here
<config-resource-editor [application]="application" [ngSwitchWhen]="Config"></config-resource-editor>
<mvc-resource-editor [application]="application" [ngSwitchWhen]="MVC"></mvc-resource-editor>
<other-resource-editor [application]="application" [ngSwitchWhen]="Other"></other-resource-editor>
<wcf-resource-editor [application]="application" [ngSwitchWhen]="WCF"></wcf-resource-editor>
<web-resource-editor [application]="application" [ngSwitchWhen]="Web"></web-resource-editor>
<webapi-resource-editor [application]="application" [ngSwitchWhen]="WebAPI"></webapi-resource-editor>
</span>
</div>
产生此错误时:ncaught EXCEPTION: Error in ../PosItAdmin/Authorization/Resource/Ng2ApplicationResourceList:24:24
ORIGINAL EXCEPTION: No provider for TemplateRef!
ORIGINAL STACKTRACE:
Error: DI Exception
at NoProviderError.BaseException [as constructor] (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:3776:27)
at NoProviderError.AbstractProviderError [as constructor] (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:4307:20)
at new NoProviderError (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:4342:20)
at ReflectiveInjector_._throwOrNull (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5794:23)
at ReflectiveInjector_._getByKeyDefault (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5822:29)
at ReflectiveInjector_._getByKey (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5785:29)
at ReflectiveInjector_.get (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5594:25)
at ElementInjector.get (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:9809:52)
at ElementInjector.get (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:9809:52)
at ReflectiveInjector_._getByKeyDefault (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5819:28)
我可以在Ngswitch上找到示例,但它们都没有试图在块时呈现自定义组件。这样做的正确方法是什么?
谢谢!
删除[]并将模板添加到组件元素后,我没有js错误,但是自定义组件没有链接到我的元素。例如,这是我带有嵌入式ngswitch的新ngfor:
<div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
<span ngSwitch="aType.Name">
{{aType.Name}} tab content here
<config-resource-editor [application]="application" ngSwitchWhen="Config" template></config-resource-editor>
<mvc-resource-editor [application]="application" ngSwitchWhen="MVC" template></mvc-resource-editor>
<other-resource-editor [application]="application" ngSwitchWhen="Other" template></other-resource-editor>
<wcf-resource-editor [application]="application" ngSwitchWhen="WCF" template></wcf-resource-editor>
<web-resource-editor [application]="application" ngSwitchWhen="Web" template></web-resource-editor>
<webapi-resource-editor [application]="application" ngSwitchWhen="WebAPI" template></webapi-resource-editor>
</span>
</div>
这是一个示例组件的样子:
import {Component, OnInit, Input} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {IApplication, IApplicationFilterData, IResourceType} from './application';
import { ROUTER_DIRECTIVES, Router, RouteParams } from '@angular/router-deprecated';
import { ApplicationService} from './application.service';
@Component({
selector: 'config-resource-editor',
template: '<div>Other editor thingy. {{application.Name}}</div>',
directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})
export class ConfigResourceEditorComponent implements OnInit {
@Input() application: IApplication;
ngOnInit(): void {
}
}
但是组件模板不会渲染。
我没有弄清楚开关语法,但NGIF的工作起作用。这正在做我想要的事情:
<div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
<config-resource-editor [application]="application" *ngIf="aType.Name == 'Config'" ></config-resource-editor>
<mvc-resource-editor [application]="application" *ngIf="aType.Name == 'MVC'" ></mvc-resource-editor>
<other-resource-editor [application]="application" *ngIf="aType.Name == 'Other'"></other-resource-editor>
<wcf-resource-editor [application]="application" *ngIf="aType.Name == 'WCF'"></wcf-resource-editor>
<web-resource-editor [application]="application" *ngIf="aType.Name == 'Web'"></web-resource-editor>
<webapi-resource-editor [application]="application" *ngIf="aType.Name == 'WebAPI'"></webapi-resource-editor>
</div>
- 在
ngSwitch
周围删除[]
,以将其视为TRINGS - 添加
*
以获取*ngSwitch
,如果未将结构指令添加到<template>
TAG
另请参见Ngswitch指令