Как получить доступ к ссылке на шаблонную переменную в определенной строке таблицы угловых материалов? (Угловой 7)

Question

В настоящее время я пытаюсь реализовать более сложную версию следующего поведения, но, поскольку у меня не будет доступа к моему проекту до понедельника, я буду упрощать ради этого, используя измененный пример из учебных пособий Angular Material. .

Таблица угловых материалов заполнена данными из массива строк. Данные представлены в поле ввода в первом столбце. Во втором столбце каждой строки находится набор кнопок, которые при нажатии изменяют содержимое ввода их строки.

Я пытался идентифицировать элемент ввода с помощью ссылочной переменной шаблона, но он всегда отображается как неопределенный. Поэтому я предполагаю, что таблица Angular Material делает что-то за моей спиной, что меняет область действия указанной переменной.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="inputColumn">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element">
            <input #inputRef placeholder="{{element.name}}">
        </td>
    </ng-container>

    <ng-container matColumnDef="buttonColumn">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">
            <button (click)="inputRef.value='Changed Element'">Change!</button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

В моем реальном проекте данные будут поступать из API, а также появятся дополнительные кнопки, которые позволят либо вводить, сохранять или отменять изменения, внесенные в его содержимое, и так далее. Но если мне удастся заставить этот пример работать, то остальное должно быть довольно простым.

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете решить эту проблему, используя ViewChildren, чтобы получить доступ ко всем элементам ввода в вашей таблице и идентифицировать их, например, с помощью атрибута id.

Извлечь это stackblitz, где я собрал быстрое решение.

По сути, все, что я делал в шаблоне, это добавлял директиву matInput к вашим input элементам и однозначно определял каждый из них через *Атрибут 1013 * (просто присвоение переменной inputColumn текущей строки element):

<mat-form-field>
  <input matInput id="{{element.inputColumn}}" placeholder="{{element.inputColumn}}">
</mat-form-field>

Добавлен вызов функции для вашей кнопки, где мы пропускаем текущие строки element:

<button mat-raised-button (click)="changeValue(element)">{{element.buttonColumn}}</button>

В компоненте мы извлекаем все элементы input с директивой matInput:

@ViewChildren(MatInput) matInputs: QueryList<MatInput>;

И затем в функции, которая вызывается кнопками, мы ищем правильный matInput через id, что соответствует element 'inputColumn значению:

changeValue(element: TableData) {
  const input = this.matInputs.find(matInput => matInput.id === element.inputColumn);
  input.value = 'Changed!';
}

Я уверен, что есть другие способы решить эту проблему, не уверен, как это ведет себя, если у вас многокнопок / рядов.