Коврик раскладной ряд угловой 7 - PullRequest
Новая
       18

Коврик раскладной ряд угловой 7

0 голосов
/ 20 марта 2019

Есть ли способ отключить расширение строки в определенном столбце.Как правило, если вы щелкнете по какой-либо части строки, она развернется.Но, скажем, один столбец является разделом комментариев, вы не хотите, чтобы строка расширялась, когда пользователь щелкает в поле ввода.Как в этом примере.Как предотвратить расширение строки при нажатии, скажем, столбца позиции: https://stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts

Ответы [ 3 ]

2 голосов
/ 20 марта 2019

В вашем примере Stackblitz код, расширяющий строку, задается в определении строки: 

...
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
  class="example-element-row"
  [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
</tr>
...

Чтобы строка расширялась, только если пользователь нажимает на определенный столбец (или в вашем случаене раскрывать при щелчке по определенному столбцу) необходимо переместить функцию onClick и необходимые CSS в те столбцы, которые должны развернуться, например, 

    ...
    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
        <th mat-header-cell mat-sort-header *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
         (click)="expandedElement = expandedElement === element ? null : element"> {{element.weight}} </td>
    </ng-container>
    ...

Я изменил ваш пример, чтобы не расширять / сворачивать, еслищелчок по столбцу позиции: Stackblitz

PS: для лучшей ремонтопригодности вы должны настроить имена классов CSS и т. д.

1 голос
/ 20 марта 2019

Использовать события указателя нет

Свойство pointer-events определяет, реагирует ли элемент на указатель событий.

создать класс с указателем-событиями: свойство none, а затем использовать ngClass для динамического добавления 

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"
        [class.disable]="element[column] == 'Hydrogen' || element[column] == '1.0079' 
        || element[column] == 1 ||element[column] == 'H'">  {{element[column]}} </td>
</ng-container>

Пример: https://stackblitz.com/edit/angular-fpp7fx

1 голос
/ 20 марта 2019

Да, вы можете использовать Angular Material или другие компоненты дизайна для Angular, если вы ищете больше.

См. Это, например: Панель расширения | Угловой материал

Обновление: вы можете попытаться использовать $event.stopPropagation, как сказано в этом решении: Угловой материал 2 Таблица Mat Row Click событие также вызывается нажатием кнопки в ячейке Mat

...