如何在 mat-table 中获取自定义组件的值/内容？

Question

我想用 mat-table 构建一个自定义表，其中最后一列和每一行我想定义一个自定义组件。这行得通。但是自定义组件是用于一些输入的，所以用户可以选择一些选项或输入一些东西。

<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>

这就是我在表格外加载组件时得到的结果

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

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

Answer 1

感谢堆栈闪电战。

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

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