Question

我对[ngTemplateOutlet]的角度7有疑问。我无法将for循环中的值传递给ngTemplateOutlet。为什么我尝试将数据从for循环传递到ngtemplateoutlet，因为我需要打开各种类型的模板。

AppComponent：

enum TabType {
  compose = 'compose',
  messageDetail = 'messageDetail',
  userDetail = 'userDetail'
}

export interface Tab {
  type: TabType;
  header: string;
  context?: object;
}

public tabs: Array<Tab> = [ {type: TabType.compose, header: "Compose Header", context: {estimate: 100} }, {type: TabType.messageDetail, header: "message Detail Header", context: {estimate: 200}} ]

HTML：

<p-tabView>

    <p-tabPanel *ngFor="let tab of tabs" header="{{tab.type}}">

       {{tab.header}}
       {{tab.type}}

       <ng-container [ngTemplateOutlet]="{{tab.type}}" >   </ng-container>

     </p-tabPanel>

</p-tabView>



<ng-template #compose >
    <app-compose></app-compose>
</ng-template>

<ng-template #messageDetail >
        <app-messagedetail></app-messagedetail>
</ng-template>

<ng-template #userDetail>
        <user-detail></user-detail>
</ng-template>

错误：

    Uncaught Error: Template parse errors:
    TypeError: Cannot read property 'toUpperCase' of undefined ("
                                    {{tab.type}}

<ng-container [ERROR ->]*ngTemplateOutlet="{{tab.type}}" > </ng-container>

</p-tabPanel> "): ng:///AppModule/MessageComponent.html@46:46

Parser Error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{tab.type}}] in ng:///AppModule/MessageComponent.html@46:46 ("
    <ng-template #messageDetail >
            <div>message detail page</div>
            [ERROR ->]<app-messagedetail></app-messagedetail>
    </ng-template>

有什么方法可以将数据从for循环传递到ngTemplateOutlet

0 个答案: