Изменить стиль содержимого карты по нажатию кнопки на карте

Question

В моем компоненте я сгенерировал мат-карту (которая является другим компонентом) через *ngFor. При нажатии на карточке есть одна кнопка, которая должна стилизовать те же элементы карточки (что я могу сделать). Но если я нажму на кнопку другой карточки, она должна стилизовать ее и вернуть прежние стили предыдущей карточки к первоначальному стилю. (Столкнувшись с проблемой в этой части). Ниже приведен пример кода

Html родительского компонента

<div class="ui-lg-3 ui-md-6 ui-g-12" *ngFor="let Obj of fruitList;let i=index;">
    <card-view-mini  [fruit]="Obj" (selectedFruit)="selectedFruit($event)"></card-view-mini>
</div>

дочерний компонент html"<div><mat-card> <span [ngClass]="{'selectedFruit':enableStyle}">{{fruit}}</span> <button (click)="changeStyle()"> </mat-card></div>"

changeStyle () changeStyle(){ this.enableStyle=true; }

Answer 1

Я полагаю, у вас есть идентификаторы для ваших фруктов. Если это так, вы можете сделать что-то вроде этого:

<span [ngClass]="{'selectedCSSClass':fruit.id == selected}">{{fruit}}</span>

<button (click)="selected=fruit.id">

где первая строка проверит, равно ли выбранное равно значению fruit.id, а кнопка установит выбранное с текущим fruit.id. вам даже не нужна функция выбора.