在Angular中使用ngTemplateOutlet时发生模板解析错误

问题描述

在我的Angular代码中实现ngTemplateOutlet时出现以下错误

compiler.js:2420 Uncaught Error: Template parse errors:
Parser Error: Missing expected } at column 47 in [searchListing; context: {$implicit: entityList:genericJobList,canCreateEntity:canCreateJob,nextBookmarkList:genericNextBmJobList,'disableScroll:disableJobScroll}]
in ng:///SharedSearchModule/SearchCompareComponent.html@707:7 ("

它说错误在第707行。我在第707行的代码是ngTemplateOutlet本身的代码

<ng-container 
    *ngTemplateOutlet="searchListing; context: {$implicit: entityList:genericJobList,disableScroll:disableJobScroll}">
</ng-container>

ng-template的一部分如下：

<ng-template #searchListing let-canCreateEntity="canCreateEntity" 
   let-entityList="entityList" let-nextBookmarkList="nextBookmarkList" 
   let-disableScroll="disableScroll">
   <!-- template code here -->
</ng-template>

根据遇到的错误，我看不到缺少的}。我传递的道具的类型为boolean（canCreateEntity，disableScroll），对象数组（entityList）和字符串（nextBookmarkList）。我无法提供一个有效的示例，因为如果不修改它就无法共享完整的代码。谁能指出错误是什么

解决方法

您的语法错误。对于$ implicit，您必须传递一个有效的json对象，因此您的上下文应如下所示：

{
  $implicit: {
    entityList: genericJobList,canCreateEntity: canCreateJob,nextBookmarkList: genericNextBmJobList,disableScroll: disableJobScroll
  }
}

当然，格式是可选的，只是这样与您的代码的区别更加清晰。您提供的错误消息甚至告诉您预期的}应该在第47列（第二个冒号所在的位置）中。这是无法再将值解释为有效json的地方，因此它假定您忘记了右括号。

编辑

现在，我仔细研究了您如何在ng-template中使用上下文，您的上下文应该看起来像这样：

{
  entityList: genericJobList,disableScroll: disableJobScroll
}

如果使用$implicit，则可以这样引用上下文：

<ng-template let-whatever>
  {{ whatever }}
</ng-template>

由于您无需使用$implicit值，因此不必提供该值。