Блог

Главная - Вопросы по программированию - Невозможно изменить порядок столбцов угловой таблицы-таблицы

Невозможно изменить порядок столбцов угловой таблицы-таблицы

#angular #angular-material #material-design #mat-table

#угловой #угловой-материал #материал-дизайн #таблица таблиц

Вопрос:

Я создал базовый список, используя материал mat-table , как на этой странице, и он работает без каких-либо проблем. Однако при попытке переместить столбец actions в конечный столбец таблицы a, показанный ниже, порядок остается неизменным в первом столбце, и это не имеет никакого смысла.

 <!-- I move this just below the tr tags -->
<!-- action column -->
<ng-container *ngIf="rowActionIcon?.length" [matColumnDef]="rowActionIcon">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)">
    <button mat-button>
      <mat-icon>remove_shopping_cart</mat-icon>
    </button>
  </td>
</ng-container>


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

Я также хочу создать 3 значка в столбце Действия в качестве последнего столбца таблицы. Есть идеи по устранению проблемы?

Ответ №1:

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

 <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

Я думаю, вам нужно изменить порядок в вашем table.component.ts
на this.displayedColumns = [...columnNames, this.rowActionIcon]

Комментарии:

1. Как насчет создания нескольких значков в одном столбце?

2. Вы должны иметь возможность добавлять несколько кнопок внутри <td> сразу после текущей кнопки и перемещать событие щелчка на кнопки, а не на компонент td

3. Определенно, я добавил дополнительные mat-cell , и это вызывает проблему.

4. Вы предлагаете использовать <mat-icon>delete</mat-icon> или <i class="material-icons">delete</i> ? Какой из них вы предлагаете? У последнего нет свойства «интерактивно».

5. <td mat-cell *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)"> <button mat-button> <mat-icon>remove_shopping_cart</mat-icon> </button> <button mat-button> <mat-icon>delete</mat-icon> </button> </td> это должно сработать .. вам все равно нужно переместить свойство click на кнопки из td