Блог

Главная - Вопросы по программированию - Как включить div только по щелчку мыши для динамического рендеринга карты mat

Как включить div только по щелчку мыши для динамического рендеринга карты mat

#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 файле, который делает первый индекс активным при загрузке.

Метки: