#angular #angular-material
Вопрос:
Я работаю над картами , где мне нужно показать div, содержащий изображение, только той карте, на которую я нажимаю. Карты, которые я визуализирую динамически. Как я могу это сделать ?
lt;div [fxFlex]="(50/gridColumns) '%'" fxFlex.xs="50%" fxFlex.sm="33%" *ngFor="let language of languages"gt; lt;mat-card class="mat-elevation-z4" style="height: 60px; border-radius: 8px;"gt; lt;div #i style="float: right; margin-bottom: 1px"gt; ////== gt; show this div img on particular clicked card only lt;img src ="../../assets/Images/Check.svg"gt; lt;/divgt; lt;mat-card-content style="text-align: center; margin-top: 23px;"gt; lt;span style="color: blue; font-weight: 800; letter-spacing: 0.2px;"gt; {{language.content}} lt;/spangt; lt;/mat-card-contentgt; lt;/mat-cardgt; lt;/divgt;
Комментарии:
1. Добавить на
ngIf
основе уникального состояния этой карты? В качестве альтернативы, используйте[hidden]
, если вы хотите только скрыть его.
Ответ №1:
Вам нужно будет управлять состоянием вашего component.ts
файла и обновлять его по щелчку мыши. Индекс списка может быть сохранен как состояние. Когда пользователь нажимает на карту, обновите активный индекс карты.
@Component({}) export class YourComponent{ currentActive = -1; setActiveCard(index: number){ this.currentActive = index; } }
lt;div *ngFor="let language of languages;index as i"gt; lt;mat-card (click)="setActiveCard(i)"gt; lt;div *ngIf="currentActive === i"gt; lt;img src ="../../assets/Images/Check.svg"gt; lt;/divgt; lt;mat-card-contentgt; lt;spangt; {{language.content}}lt;/spangt; lt;/mat-card-contentgt; lt;/mat-cardgt; lt;/divgt;
Комментарии:
1. Спасибо за правильное решение , думал о том же, но не смог понять логику в файле ts .
currentActive = -1;
. Можете ли вы объяснить, почему -1?2. Это просто для инициализации переменной. Вы также можете просто использовать
null
вместо этого.3. Понял. Спасибо
4. Привет, Адитья, просто короткий вопрос. Как я сделаю 1-ю карточку индекса всегда активной. Я имею
lt;div *ngIf="currentActive === i"gt; lt;img src ="../../assets/Images/Check.svg"gt; lt;/divgt;
в виду, всегда ли будет проверяться первый индекс при загрузке страницы ?5. Сделайте
currentActive = 0
это вts
файле, который делает первый индекс активным при загрузке.