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

Я хочу создать настраиваемую таблицу с 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'


angular angular-material angular-material-7 angular-material-table
person burhangoeksen    schedule 25.05.2019    source источник
comment
Есть ли шанс поделиться стеком? Я не вижу сразу ничего неправильного, поэтому было бы проще, если бы я мог видеть весь окружающий код.   -  person Jesse    schedule 26.05.2019
comment
@Jesse Здесь это ссылка   -  person burhangoeksen    schedule 26.05.2019
comment
Я нигде не вижу undefined. Stackblitz выглядит так, как будто все работает так, как должно быть. Можете ли вы предоставить больше контекста?   -  person Jesse    schedule 27.05.2019
comment
Просто проверьте консоль, и если вы выберете что-то внутри таблицы и нажмете кнопку, вы увидите это   -  person burhangoeksen    schedule 27.05.2019

Ответы (1)


arrow_upward
1
arrow_downward

Спасибо за stackblitz.

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

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

person Jesse    schedule 26.05.2019
comment
Спасибо! Теперь я понимаю свою проблему, но есть ли способ получить выбранное значение с помощью чего-то вроде службы, которая взаимодействует с компонентом выбора и компонентом, содержащим таблицу и компонент выбора? - person burhangoeksen; 27.05.2019
comment
Я бы посмотрел на FormArrays. Кроме того, если вы хотите сделать это правильно, реализуйте ControlValueAccessor в своих пользовательских компонентах. Я знаю, что ни одно из этих решений не является простым, но ваше будущее будет вам благодарно. Тем не менее ... если вы ищете более простой способ, просто возьмите элементы AppDropDown как ViewChildren внутри шаблона компонента с помощью декоратора @ViewChildren. - person Jesse; 27.05.2019