代码之家  ›  专栏  ›  技术社区  ›  kal93

ngtemplateoutlet似乎不适用于mat cell

  •  0
  • kal93  · 技术社区  · 6 年前

    我试图将内容投影到一个扩展行中,但迄今为止没有成功。 同样的方法也适用于其他任何地方,不知道为什么它不能与 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

    1 回复  |  直到 6 年前
        1
  •  1
  •   yurzui    6 年前

    看着你的 AppModule

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

    我想你不知道这些选择的目的是什么。

    尝试删除 TableDemoComponent RowDetailContent bootstrap 选项,所以应该是:

    bootstrap: [TableExpandableRowsExample]
    

    Forked Stackblitz