Угловая таблица материалов развернуть строку по нажатию колонки - PullRequest
Новая
       10

Угловая таблица материалов развернуть строку по нажатию колонки

0 голосов
/ 21 мая 2018

Существует множество вопросов по этой теме, особенно в отношении расширения строк.Тем не менее, все реализации, которые я видел, делаются либо с использованием аккордеона / панелей, стилизованных под таблицы (которые требуют большего количества действий для разбивки на страницы и сортировки), с использованием предиката when (который, кажется, имеет проблемы при попытке использовать нумерацию страниц),или что кажется идеальным решением - это прикрепить директиву к элементу mat-row.

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

Для меня это нормально, но для нашего клиента это не так, и лучшая работа, которую я вижу, - развернуть строку при щелчке на столбце, который имеет просто значок плюса.Было бы идеально, если бы вы расширили только этот щелчок, но пока что, детка.

Кто-нибудь сталкивался с подобной ситуацией и нашел какое-то решение?Просто хотел бы быть в правильном направлении.До сих пор я делал все, что в прикрепленном стеке, и он прекрасно работает.Просто нужен последний шаг, чтобы сделать клиента счастливым!

1 Ответ

0 голосов
/ 21 мая 2018

Это немного хакерский способ, но он работает:

HTML: 

<!-- Name Column -->
<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"><span (click)="showDetails($event, element)">{{element.name}}</span> 
    </mat-cell>
</ng-container>

TS: 

showDetails(event: UIEvent, element): void {
    event.stopPropagation();
    // Do whatever with the element
}

Важная часть заключается в том, что вывы передаете UIEvent (событие click) TS и вызываете stopPropagation, чтобы остановить расширение таблицы.

...