【问题标题】: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/…
    猜你喜欢
    • 1970-01-01
    • 2021-09-10
    • 1970-01-01
    • 2018-05-07
    • 1970-01-01
    • 2016-06-29
    • 2020-06-25
    • 1970-01-01
    • 2017-05-07
    相关资源
    最近更新 更多