Как я могу получить значение / содержимое пользовательского компонента внутри таблицы mat?

Question

Я хочу создать пользовательскую таблицу с таблицей mat, где для последнего столбца и для каждой строки я хочу определить пользовательский компонент. Это работает. Но пользовательские компоненты предназначены для некоторого ввода, поэтому пользователь может выбрать некоторые параметры или ввести что-то еще.

<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 framework ... Ознакомьтесь с этой статьей для получения подробной информации о ней, но, по сути, переменные-ссылки на шаблоны доступны только внутри их собственного шаблона. И когда мы добавляем *ngIf (или любую структурную директиву по этому вопросу, включая *matCellDef), Angular заканчивает тем, что создает новый <ng-template>, делая любые ссылочные переменные шаблона доступными только в этом шаблоне.

Таким образом, когда вы пытаетесь сослаться на «drop» вне директив *, оно отображается как неопределенное.