如何在 mat-table 中获取自定义组件的 value/content？

Question

我想使用 mat-table 构建一个自定义 table，其中我想为最后一列和每一行定义一个自定义组件。这行得通。但自定义组件用于某些输入，因此用户可以 select 一些选项或输入一些内容。

<mat-table class="mat-elevation-z8" #table [dataSource]='dataSource'>

<ng-container matColumnDef='value'>
      <mat-header-cell *matHeaderCellDef>Values</mat-header-cell>
      <mat-cell *matCellDef='let row'>
          <app-dropdown-element #drop *ngIf="row.value == 'dropdown'" [options$]='row.$options'></app-dropdown-element>  

          <app-input-element #text *ngIf="row.value == 'text'" [title]=''></app-input-element>

          <app-input-number-element #num *ngIf="row.value == 'number'" [number$]='row.$number'></app-input-number-element>

      </mat-cell>
    </ng-container>
</mat-table>

这就是我在 table

之外加载组件时得到的结果

'selected' value is also correct:
DropdownElementComponent {options$: {…}, selected: "TEST"}
options$: {label: "TEST", options: Array(2), id: "oil-type"}
selected: "TEST"
__proto__: Object

但是在 table 里面，我得到一个 'undefined'

Answer 1

感谢 stackblitz。

您实际上触及了 Angular 框架的一个非常有趣的怪癖...查看 this 文章了解详细信息，但基本上，模板引用变量只能在它们自己的内部访问模板。当我们添加 *ngIf（或与此相关的任何结构指令，包括 *matCellDef）时，Angular 最终会创建一个新的 <ng-template>，使任何模板引用变量只能访问在那个模板中。

因此，当您尝试在 * 指令之外引用 "drop" 时，它显示为未定义。

如何在 mat-table 中获取自定义组件的 value/content？

How can I get the value/content of a custom component inside mat-table?

angular

angular-material

angular-material-7

angular-material-table