ngTemplateOutlet 似乎不适用于 mat-cell

Question

我正在尝试将内容投影到展开的行中，但到目前为止没有成功。同样的方法在其他任何地方都适用，不确定为什么它不适用于 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>;

None 似乎效果不错。

这是Stackblitz

Answer 1

看着你的 AppModule

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

我怀疑您不知道这些选项的用途。

尝试从 bootstrap 选项中删除 TableDemoComponent 和 RowDetailContent，因此它应该是：

bootstrap: [TableExpandableRowsExample]

Forked Stackblitz

ngTemplateOutlet 似乎不适用于 mat-cell

ngTemplateOutlet doesn't seem to work with mat-cell

angular-material2

angular

angular-material-6