Получить статус открытого аккордеона в матовом столе с гармошкой - Angular7 - PullRequest
Новая
       13

Получить статус открытого аккордеона в матовом столе с гармошкой - Angular7

0 голосов
/ 28 января 2020

Я использую мат-таблицу с гармошкой, все, что мне нужно, это чтобы раскрыть / закрыть мат-строку в мат-таблице

Stackblitz-Mat-таблица с расширяемыми строками

Я хочу таким образом, как (opened)="panelOpened($event)" (closed)="panelClosed($event)" в матовой панели расширения. Как вышеперечисленного можно достичь в матовой таблице? Если нет, есть ли другой способ сделать?

Заранее спасибо

1 Ответ

0 голосов
/ 29 января 2020

По сути, вы поддерживаете переменную, которая будет отслеживать ваш открытый, закрытый статус. В вашем массиве dataSource для каждой строки изначально есть переменная rowStatus false: 

[
  {'column1': 'data', 'column2': 'data', 'rowStatus': false},
  {'column1': 'data', 'column2': 'data', 'rowStatus': false},
  {'column1': 'data', 'column2': 'data', 'rowStatus': false},
]

В вашем. html, для столбца вы можете добавить событие клика: 

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="columnClicked(row)"></tr>

Теперь Хак - это отрицать rowStatus после нажатия на столбец в .ts: 

columnClicked(element) {
  element.rowStatus = !element.rowStatus
}

В любой момент времени, если rowStatus имеет значение false, он закрывается. иначе это открыто. Но тогда эта переменная (rowStatus) рекомендуется находиться в объекте массива столбца вашей таблицы. Таким образом, каждый столбец будет иметь уникальную переменную rowStatus и открыт, закрытие каждого столбца будет независимым. Надеюсь, я в порядке. Это очень абстрактно, и это должно работать для вас. Просто измените ваш массив объектов соответственно

...