Ошибка синтаксического анализа шаблона при использовании ngTemplateOutlet в Angular

#html #angular #angular8 #ng-template #ngtemplateoutlet

#HTML #angular #angular8 #ng-template #ngtemplateoutlet

Вопрос:

Я получаю следующую ошибку при реализации 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-шаблона выглядит следующим образом:

 <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). Я не могу предоставить рабочий пример, поскольку я не могу поделиться полным кодом без его изменения. Может кто-нибудь указать, в чем ошибка

Ответ №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 значение, вам не нужно его указывать.