在 Angular 中使用 ngTemplateOutlet 时出现模板解析错误

Question

我在 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,
    canCreateEntity:canCreateJob, nextBookmarkList:genericNextBmJobList, 
    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>

根据遇到的错误，我没有看到缺少 }。我传递的道具是布尔类型（canCreateEntity、disableScroll）、对象数组（entityList）和字符串（nextBookmarkList）。我无法提供一个工作示例，因为我无法在不修改的情况下共享完整代码。谁能指出错误是什么

Answer 1

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

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

当然，格式化是可选的，只是为了让您的代码的区别更加清晰。您提供的错误消息甚至告诉您预期的 } 应该在第 47 列，也就是第二个冒号所在的位置。这是该值不再被解释为有效的点 json，因此假设您忘记了右括号。

编辑

现在我仔细研究了您如何在 ng-template 中使用上下文，您的上下文应该如下所示：

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

如果使用$implicit，可以这样参考上下文：

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

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

在 Angular 中使用 ngTemplateOutlet 时出现模板解析错误

Template parsing error while using ngTemplateOutlet in Angular

html

ng-template

angular

angular8

ngtemplateoutlet