Как свернуть уже развернутую расширяемую строку в угловой угловой таблице?

Question

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

https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html (это из документации здесь: https://material.angular.io/components/table/examples)

По сути, это позволяет развернуть строку и развернуть любые другие развернутые строки. Я хочу иметь возможность свернуть существующую расширенную строку, не раскрывая другие.

Я пытался возиться с линией:

<div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">

для вложенного if, что-то вроде:

 <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? element == expandedElement ? 'collapsed' : 'expanded' : 'collapsed'">   

что явно не работает. Я не очень хорошо разбираюсь в HTML / Angular / (Webby-материал), поэтому я не был уверен, что Google, чтобы найти правильный синтаксис для этого. Что вы называете что-то вроде [@detailExpand]? Метод класса? Метод HTML? Спасибо

Answer 1

Измените обработчик кликов следующим образом:

(click)="expandedElement = expandedElement === element ? null : element"

Это гарантирует, что, если вы нажмете на уже развернутый элемент, он будет иметь значение expandedElement, равное нулю, поэтому никакие элементы не станут расширенными

Вот вилка Штаблица