将上下文传递给模板后,上下文未定义

问题描述 投票:1回答:1

为什么在extensiontemplate中未定义rowData?将它传递给extensiontemplate之前没问题。

<ng-template>
  <ng-container *ngTemplateOutlet="extensiontemplate; context: rowData"></ng-container>
</ng-template>

<ng-template #extensiontemplate> 
<!-- here rowData is undefined -->
</ng-template>
angular angular2-template angular2-directives
1个回答
1
投票

您必须在模板中添加变量rowData,如:

<ng-template #extensiontemplate let-rowdata> 
    <!-- here rowData is undefined -->
</ng-template>

如果您在上下文(rowData)中添加了$implicit属性,那么这将起作用,例如,您的rowData就像:

rowData = {$implicit: 'row data'};

如果尚未添加隐式属性,则需要使用其值作为上下文中的键的变量。

例如,如果您的上下文是

rowData = {somethingElse: 'row data'};

您需要拥有以下模板:

<ng-template #extensiontemplate let-rowData="somethingElse"> 
    <!-- here rowData is undefined -->
</ng-template>

请参阅此文档:https://angular.io/api/common/NgTemplateOutlet

编辑

对于您的情况,您传递到另一个模板的检索到的rowData没有任何$implicit值,您需要明确指定它,如下所示:

<ng-container *ngTemplateOutlet="extensiontemplate; context: rowData"></ng-container>
<ng-template let-viewDetails="vin" #extensiontemplate>
    <tr *ngIf="viewDetails">
        <td colspan="3">
            Additional row data here for VIN ID: {{viewDetails}}                  
        </td>
    </tr>
</ng-template>

在这里查看:https://stackblitz.com/edit/angular-bmq2xi?file=src/app/app.component.html

© www.soinside.com 2019 - 2024. All rights reserved.