Как выбрать одну ячейку в мат-таблице (Angular 7)

Question

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

Но в моем случае каждая ячейка в этой строке отображает поле ввода, как вы можете видеть на скриншоте:

My ngIf -Statement выглядит следующим образом:

Показывает тег span:! Editable ||(selectedRowIdx! == idx)

Показывает тег ввода: редактируемый && (selectedRowIdx == idx)

<ng-container matColumnDef="TYPE">
  <mat-header-cell *matHeaderCellDef> TYPE </mat-header-cell>
  <mat-cell *matCellDef="let elem; let idx = index" (click)="testFocusIn(elem.TYPE)">
    <span *ngIf="!editable || (selectedRowIdx !== idx)">{{elem.TYPE}}</span>
    <mat-form-field *ngIf="editable && (selectedRowIdx == idx)"> 
      <input matInput [(ngModel)]="elem.TYPE" [appAutoFocus]="(focus === elem.TYPE)">
    </mat-form-field>
  </mat-cell>
</ng-container>

<ng-container matColumnDef="NAME">
  <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
  <mat-cell *matCellDef="let elem; let idx = index" (click)="testFocusIn(elem.NAME)">
    <span *ngIf="!editable || (selectedRowIdx !== idx)">{{elem.NAME}}</span>
    <mat-form-field *ngIf="editable && (selectedRowIdx == idx)"> 
      <input matInput [(ngModel)]="elem.NAME" [appAutoFocus]="(focus === elem.NAME)">
    </mat-form-field>
  </mat-cell>
</ng-container>

Что еще можно проверить?Может быть, определить ID-тег?

Answer 1

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

Я не нашел чистого решения, но этот stackblitz показывает рабочее решение вашей проблемы.

Когда мы щелкаем по ячейке, мы устанавливаем редактируемую index и редактируемую column.Это помогает нам однозначно идентифицировать ячейку, которую мы хотим редактировать.

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element; let i = index;" (click)="edit(i, 'name')">
    <span *ngIf="showValue(i, 'name')">{{element.name}}</span>
    <mat-form-field *ngIf="showInput(i, 'name')"> 
      <input matInput placeholder="Placeholder">
    </mat-form-field>
  </td>    
</ng-container>

В компоненте

edit(index: number, column: string) {
  this.editableColumn = column;
  this.editableIndex = index;
}

showInput(index: number, column: string) {
  return this.editableColumn === column && this.editableIndex === index;
}

showValue(index: number, column: string) {
  return this.editableColumn !== column || this.editableIndex !== index;
}

Это немного уродливо в том смысле, что мы должны передать column имя в шаблоне 3 раза для функции, и все вызовы функций довольно сильно загрязняют шаблон.Но я уверен, что при некотором рефакторинге вы могли бы придумать чистое решение (одним из упрощений было бы использование переменной шаблона и ng-template, что избавило бы от одного вызова функции).