Есть ли способ передать данные из цикла в ngTemplateOutlet - PullRequest
Новая
       14

Есть ли способ передать данные из цикла в ngTemplateOutlet

1 голос
/ 07 октября 2019

У меня проблема с углом 7 с [ngTemplateOutlet]. Я не могу передать значение для цикла в 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>

error:

    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>
...