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”时，它显示为未定义。

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

1 个答案: