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

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

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

введите описание изображения здесь

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

Показывает 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-тег?


angular angular7 mat-table angular-material-7
person yuro    schedule 10.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Я не нашел чистого решения, но это 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, что избавило бы от одного вызова функции).

person Fabian Küng    schedule 10.04.2019
comment
Спасибо за ваш ответ. Это помогает мне в моем подходе. Если у кого-то есть лучшее решение, дайте мне знать :) - person yuro; 10.04.2019