NgTemplateOutlet не работает с mat-cell

Я пытаюсь спроецировать контент в расширенную строку, но пока безуспешно. Тот же подход работает везде, не знаю, почему он не работает с mat-table.

<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef = "expandedDetail">
    <td mat-cell *matCellDef = "let element" [attr.colspan] = "columnsToDisplay.length">
      <div class = "example-element-detail"
           [@detailExpand] = "element == expandedElement ? 'expanded' : 'collapsed'">
        <div class = "example-element-description">
          {{element.description}}aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
          <span class = "example-element-description-attribution"> -- Wikipedia 
<ng-container [ngTemplateOutlet]='rowDetail'></ng-container></span>
        </div>
      </div>
    </td>
  </ng-container>

И в использовании пробовал

<demo-table 
[rowDetail] = "rowDetailContent "
></demo-table>

<ng-template #rowDetailContent >
This is a passed template
</ng-template>

и это

<demo-table 
[rowDetail] = "details "
></demo-table>

TS

@ViewChild('rowDetailContent') details :TemplateRef<any>;

Кажется, ни один из них не работает.

Вот Stackblitz

Тестирование функциональных 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
0
411
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Глядя на свой AppModule

entryComponents: [TableExpandableRowsExample,TableDemoComponent,RowDetailContent],
declarations: [TableDemoComponent,TableExpandableRowsExample,RowDetailContent],
bootstrap: [TableExpandableRowsExample,TableDemoComponent,RowDetailContent],

Я подозреваю, что вы не знаете, какова цель этих опций.

Попробуйте удалить TableDemoComponent и RowDetailContent из опции bootstrap, так что это должно быть:

bootstrap: [TableExpandableRowsExample]

Разветвленный Stackblitz

Вот некоторая документация о том, что на самом деле означают здесь свойства: angular.io/guide/bootstrapping

Edric 07.07.2018 18:27

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