Ошибка статического впрыска Angular 5

Я столкнулся с этой ошибкой. Я проверил * ngFor, чтобы убедиться, что это не синтаксическая ошибка. Я также попытался предоставить общий модуль, который, возможно, исправит это, но я все еще застрял на нем.

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]:
StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]: NullInjectorError: No provider for TemplateRef! Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]:
StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]: NullInjectorError: No provider for TemplateRef!

<div *ngFor = "let session of sessions">
  <!-- chat mode -->
  <div [hidden] = "navState.key !== session.id">
    <!-- chat mode -->
    <div *ngIf = "session.modeName === 'chat'">
      <div class = "controls">
        <div class = "left-ctrls">
          <div class = "action"><i class = "icon-stop"></i><span>Ban</span></div>
          <div class = "action"><i class = "icon-clock"></i><span>Expire</span></div>
          <div class = "action"><i class = "icon-transfer"></i><span>Transfer</span></div>
          <div class = "action"><i class = "icon-add"></i><span>Invite</span></div>
          <div class = "action"><i class = "icon-join"></i><span>Join</span></div>
          <div class = "action"><i class = "icon-branch"></i><span>Takeover</span></div>
          <div class = "action"><i class = "icon-remove"></i><span>Remove</span></div>
        </div>
        <div class = "right-nav">
          <div class = "nav-link"><i class = "icon-cart"></i><span>Catalog</span></div>
          <div class = "nav-link"><i class = "icon-folder"></i><span>FAQ</span></div>
          <div class = "nav-link"><i class = "icon-calendar"></i><span>History</span></div>
        </div>
      </div>
      <div class = "page-body">
        <div class = "chat-area">
          <div class = "client-info">
            <div class = "device-info">
              <div><i class = "icon-mobile"></i></div>
              <div>
                <span>Mobile</span>
                <span>iOS/Safari</span>
              </div>
            </div>
            <div class = "visit-info">
              <span>Visits</span><span>1</span>
              <span>Chats</span><span>10</span>
              <span>Orders</span><span>10</span>
              <span>questions</span><span>5</span>
              <span>Products</span><span>2</span>
            </div>
          </div>
          <div class = "chat-header">
            <i class = "icon-browser"></i>&nbsp;&nbsp;<span>Page History</span>
          </div>
          <div class = "chat-view">
            <div *ngFor = "let message of session['transcript']">
                <nd-chat-bubble *ngIf = "!message.isNotification" [message] = "[message, session.modeName]"></nd-chat-bubble>
                <nd-chat-notification *ngIf = "message.isNotification" [message] = "message"></nd-chat-notification>
            </div>
          </div>
          <nd-chat-input
            [showPCSurveyBtn] = "currentWork?.showSurvey"
            [sessionMode] = "session.modeName"
            (messageEmitter) = "handleAdvocateInput($event)"
            (showPCSurvey) = "showSurvey = $event"
            ></nd-chat-input>
        </div>
      </div>
    </div>

    <!-- offline message mode -->
    <div *ngIf = "session.modeName === 'forms'">
      <div class = "controls">
        <div class = "left-ctrls">
          <div class = "action"><i class = "icon-stop"></i><span>Ban</span></div>
          <div class = "action"><i class = "icon-transfer"></i><span>Done</span></div>
        </div>
        <div class = "right-nav">
          <div class = "nav-link"><i class = "icon-cart"></i><span>Catalog</span></div>
          <div class = "nav-link"><i class = "icon-folder"></i><span>FAQ</span></div>
          <div class = "nav-link"><i class = "icon-calendar"></i><span>History</span></div>
        </div>
      </div>
      <div class = "page-body">
        <div class = "chat-area">
          <div class = "client-info">
            <div class = "device-info">
              <div><i class = "icon-mobile"></i></div>
              <div>
                <span>Mobile</span>
                <span>iOS/Safari</span>
              </div>
            </div>
            <div class = "visit-info">
              <span>Visits</span><span>1</span>
              <span>Chats</span><span>10</span>
              <span>Orders</span><span>10</span>
              <span>questions</span><span>5</span>
              <span>Products</span><span>2</span>
            </div>
          </div>
          <div class = "chat-header">
            <i class = "icon-browser"></i>&nbsp;&nbsp;<span>Page History</span>
          </div>
          <div class = "chat-view">
            <div class = "offline-msg-box">
                <div class = "msg-header">
                  <span>OFFLINE MESSAGE</span>
                  <span class = "dot"></span>
                  <span>{{session.customer}}</span>
                </div>
                <P [chatMessageBuilder] = "[session.forms, session.modeName]"></P>
            </div>
          </div>
          <nd-chat-input
            [sessionMode] = "session.modeName"
            (formsReply) = "submitFormsReply($event)">
          </nd-chat-input>
        </div>
      </div>
    </div>
  </div>
</div>

как насчет фактического кода и фактической ошибки?

Antoniossss 26.06.2018 19:52

@Antoniossss - это файл шаблона, который вызывает ошибку. Если я это прокомментирую, все остальное работает нормально.

Femi Abolaji 26.06.2018 20:00

Отметьте (или добавьте его в свой ответ) HTML, созданный компонентами nd-chat-input, nd-chat-bubble и nd-chat-notification. Эта ошибка может быть вызвана использованием тега <template> вместо <ng-template> в этих компонентах или просто отсутствием символа * перед директивами шаблона, такими как *ngIf, *ngFor, *ngSwitch.

Andriy 26.06.2018 20:17

Спасибо @Andriy, в конце концов я смог это исправить. В опубликованном мною файле шаблона проблема возникла не из-за этого. На самом деле он появился там, где я визуализировал шаблон. Итак, я использовал <nd-customer-chat [ngIf] = "workList.length" [navState] = "navState" [sessions] = "sessions"></nd-customer-chat> вместо <nd-customer-chat *ngIf = "workList.length" [navState] = "navState" [sessions] = "sessions"></nd-customer-chat>

Femi Abolaji 27.06.2018 09:14
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
4
902
0

Другие вопросы по теме