Расширение нескольких div'ов независимо от значения логической переменной

Question

У меня есть список mat-card компонентов, которые индивидуально раскрываются при нажатии кнопки на каждой карте.До сих пор логическая переменная была определена в самом HTML-коде, а не в файле Angular .ts, однако я хочу перевести ее на использование логического значения в файле .ts.

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

Я знаю, что не так, но я не могу думать о том, как это исправить: - /

Вот стек

Answer 1

Поскольку ваши карточки создаются с помощью директивы ngFor из массива, расширенные данные также должны храниться в массиве!

.ts

thisExpands = [];

.html

[ngClass]="{expanded: thisExpands[x]}"

(click)="thisExpands[x] = !thisExpands[x]"

Демо