Question

我正在尝试从另一个单元格中引用物料表单元格中的输入。

<!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td class="expand" mat-cell *matCellDef="let element">
      <input
        #input   <--- the referenced element
        matInput
        type="text"
        name="name"
        [(ngModel)]="element.name"
      >
    </td>
  </ng-container>

<!-- Actions Column -->
  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">
      <a
        mat-button
        (click)="input.focus()"   <--- the reference to the element
      >
        <mat-icon>edit</mat-icon>
      </a>
    </td>
  </ng-container>

但是出现错误ERROR TypeError: Cannot read property 'focus' of undefined。这有可能吗？我正在使用Angular 7。

Answer 1

由于templateRef不在视图中其他ng-container的范围内，因此您无法跨ng-container进行查询...您将需要通过{{1}获取elementRef }，然后使用component方法将焦点放在元素上。

@ViewChild

然后点击按钮致电@ViewChild('input') _input; setFocus(){ this._input.nativeElement.focus(); }

setFocus()

如果需要引用每一行中的每个输入，则需要使用 <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef>Name</th> <td class="expand" mat-cell *matCellDef="let element"> <input #input <--- the referenced element matInput type="text" name="name" [(ngModel)]="element.name" > </td> </ng-container>  <ng-container matColumnDef="actions"> <th mat-header-cell *matHeaderCellDef></th> <td mat-cell *matCellDef="let element"> <a mat-button (click)="setFocus()" <--- the reference to the element > <mat-icon>edit</mat-icon> </a> </td> </ng-container>并传递行的索引。

设置操作列，并将索引传递到@ViewChildren

focusInput(i)

使用 <ng-container matColumnDef="action"> <th mat-header-cell *matHeaderCellDef> Symbol </th> <td mat-cell *matCellDef="let element; let i = index"> <button (click)="setFocus(i)">Focus Input</button> </td> </ng-container>检索所有输入，使用ViewChildren仅将输入集中在您单击的行中。

Stackblitz

https://stackblitz.com/edit/angular-y49cpf-5rmklr?embed=1&file=app/table-basic-example.ts

跨MatTable ng容器使用TemplateRef

1 个答案: