Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2018, 12:51
Новичок на форуме
Отправить личное сообщение для AlexTrust Посмотреть профиль Найти все сообщения от AlexTrust
 
Регистрация: 03.03.2018
Сообщений: 4

Angular 6 клик по иконкам
Добрый день. Подскажите, пожалуйста:
проект на ангулар - материал
<mat-card style="display: flex;" *ngFor="let item of list">
    <div (click)="check = !check">
      <mat-icon [innerText]="check ? 'favorite_border' : 'favorite'"></mat-icon>
    </div>
    <p style="margin: 0"> {{item.question}} </p>
  </mat-card>


при клике на одну иконку меняются все, а нужно для каждого mat-card отдельно.
Что я делаю не так?

Делал и через функцию:
<mat-card style="display: flex;" *ngFor="let item of list">
    <mat-icon (click) = "changeIcon('favorite_border')">{{iconName}}</mat-icon>
    <p style="margin: 0"> {{item.question}} </p>
  </mat-card>

iconName = 'favorite';
  
  changeIcon(newIcon:string) :void {
    this.iconName = newIcon;
   }


но то же самое. меняются все иконки

Последний раз редактировалось AlexTrust, 03.07.2018 в 12:53.
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2018, 14:43
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

AlexTrust,
Переменная check определена в компоненте и применятся ко всем <mat-card>. Соответственно при клике на одну из иконок происходит изменение общей переменной check. Чтобы этого избежать, можно хранить состояние check не на уровне компонента, а на уровне модели item, которая используется для отображения mat-card.
<mat-card style="display: flex;" *ngFor="let item of list">
    <div (click)="item.check = !item.check">
      <mat-icon [innerText]="item.check ? 'favorite_border' : 'favorite'"></mat-icon>
    </div>
    <p style="margin: 0"> {{item.question}} </p>
  </mat-card>
Ответить с цитированием
  #3 (permalink)  
Старый 03.07.2018, 14:56
Новичок на форуме
Отправить личное сообщение для AlexTrust Посмотреть профиль Найти все сообщения от AlexTrust
 
Регистрация: 03.03.2018
Сообщений: 4

destus,
Спасибо огромное.
Могу я у Вас уточнить еще один момент по поводу передачи объекта из одного компонента в другой?
Ответить с цитированием
  #4 (permalink)  
Старый 03.07.2018, 15:13
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

AlexTrust,
Вы можете задавать вопросы на форуме, он же для этого и существует. Если кто-то из участников будет знать ответ на вопрос - подскажет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Angular Universal, серверный рендеринг - нужно ли мне это? yinfo Angular.js 6 29.10.2018 14:17
Вакансия: Опытный разработчик Angular / Anguar 2. Москва. AK76 Работа 0 14.08.2017 11:37
Ищу Senior Frontend (React, Angular), Москва, 140 - 180 000 gross, full time офис. Ekaterina Polyakova Работа 0 11.08.2016 19:07
Angular task workflow mardoksp Angular.js 0 15.02.2016 21:34
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 10:47