如何访问Angular Material表的特定行中的模板变量引用？ （角度7）

Question

我目前正在尝试实现以下行为的更复杂的版本，但是由于我要到周一才能访问我的项目，因此，我将使用Angular Material教程中的一个更改示例进行简化。

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属性标识它们来解决此问题。

查看此堆叠闪电战，在那里我提出了一个快速解决方案。

基本上，我在模板中所做的就是将matInput指令添加到您的input元素，并通过id属性唯一地标识每个via（只需分配当前行element的inputColumn变量）：

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

在您的按钮上添加了一个函数调用，我们在其中传递了当前的row element ：

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

在组件中，我们使用matInput指令检索所有input元素：

@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!';
}

我确定还有其他方法可以解决此问题，如果您有很多按钮/行，则不确定如何运行。