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

【问题标题】：context is undefined after passing it to template将上下文传递给模板后未定义上下文
【发布时间】：2019-09-19 06:09:56
【问题描述】：

为什么在扩展模板中没有定义 rowData？在传递给扩展模板之前就可以了。

<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】：

您必须在模板中添加一个变量rowData，例如：

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

如果您在 context(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

【讨论】：

如果 rowData 没有在 typescript 中定义而只在 html 中定义怎么办？
@MarcoMenardi 你如何在 HTML 中定义它？
rowData 由我正在使用的 primeNG 库定义。这是一个例子：stackblitz.com/edit/…