时间戳

首页 > 解决方案 > 如何在 mat-table 中获取自定义组件的值/内容？

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

问题描述

我想用 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'

标签： angularangular-materialangular-material-7angular-material-table

解决方案

感谢堆栈闪电战。

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

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

推荐阅读