Ionic 3 уникальные кнопки
Я новичок в Ionic и использую Ionic v3.
У меня есть * ngFor Repeater, отображающий список карточек, и каждая карточка содержит изображение и кнопку под каждым изображением, Как сделать кнопку уникальной. Я хочу, чтобы только нажатая кнопка под изображением меняла свое имя и цвет. теперь код меняет все кнопки на визуализированных карточках.
<ion-card no-padding padding-bottom no-margin class = "card" *ngFor = "let c of cards;">
<ion-row>
<img src = {{c.Image}} />
</ion-row>
<button clear ion-button icon-only (click) = "likeButton(c)" class = "like-btn">
<ion-icon no-padding [name] = "like_btn.icon_name" color = "{{ like_btn.color }}" class = "icon-space"></ion-icon>
</button>
</ion-card>
и вот это .ts
likeButton(c: any) {
if (this.like_btn.icon_name === 'heart-outline') {
this.like_btn.icon_name = 'heart';
this.like_btn.color = 'danger';
// Do some API job in here for real!
}
else {
this.like_btn.icon_name = 'heart-outline';
this.like_btn.color = 'black';
}
}
@JBNizet спасибо за ответ, я отредактировал свой вопрос, чтобы он был более понятным. Не могли бы вы взглянуть на это и сообщить мне, потому что я не совсем понял ваше решение.
Если вам нужна красная кнопка на первой карте, зеленая кнопка на второй и синяя кнопка на третьей карте, вам нужно иметь три разных цветовых переменных, а не только одну. Если бы у вас было 1000 карточек, вам понадобилось бы 1000 переменных. Здесь есть прямая корреляция: каждая карта должна иметь свой цвет и, следовательно, свою собственную переменную, чтобы содержать этот цвет. Поэтому вместо того, чтобы сохранять цвет на this (то есть на уникальном компоненте), вам нужно сохранить его на самой карте: <ion-icon ... [color] = "c.color" ...>. likeButton(c: Card) { if (c.icon_name === 'heart-outline') { ....
@JBNizet .. мне нужна кнопка с сердечком, такая же, как в instagram. поэтому каждая нажатая кнопка будет окрашена в красный цвет, а при повторном нажатии снова станет черным. с чем я столкнулся, так это то, что при нажатии все кнопки окрашиваются в красный цвет, а не только нажатая.
Да, я это прекрасно понимаю. Вы читали мои комментарии? Что в этом непонятного? Что ты не понимаешь? Допустим, у вас есть класс Component. И этот класс Component имеет массив из 3 человек. У каждого человека должно быть свое имя. Где следует определить свойство name? На объекте "Компонент" или на объектах "Пользователь"? То же самое. У вас есть 3 карты, каждая с цветом. Где следует определять цвет? На компоненте или на карте?
Можете поделиться своим нынешним массивом - карточками?
@SergeyRudenko добавил в описание ссылку на массивы: i.stack.imgur.com/ngSnZ.png
@JBNizet да, я прочитал ваш комментарий, и я работаю над вашими предложениями.
@JBNizet теперь работает. К сожалению, я пока не могу выбрать ваш ответ. Мне нужно заработать какие-то значки.
Я только комментировал, ответа нет. Не беспокойся об этом. Вы можете просто удалить свой вопрос: многие похожие вопросы уже были заданы и даны ответы.
Ответы 1
Вместо этого я бы добавил атрибут к объекту карты в массиве, который хранит, является ли он `` понравившимся '' (например, логическим), тогда в вашем представлении вы можете перебирать массив и обновлять конкретную карту, когда пользователь нажимает кнопку :
<ion-card no-padding padding-bottom no-margin class = "card" *ngFor = "let c of cards>
<ion-row>
<img src = {{c.Image}} />
</ion-row>
<button clear ion-button icon-only (click) = "likeButton(c)" class = "like-btn">
<ion-icon no-padding [name] = "c.liked ? 'heart' : 'heart-outline'" [color] = "c.liked ? 'danger' : 'black'" class = "icon-space"></ion-icon>
</button>
</ion-card>
Затем в вашем методе likeButton:
likeButton(c: any) {
if (c.liked) {
c.liked = false // Update the array which should also update your view
// Do whatever you want when a card is changed to not liked.
} else {
c.liked = true // Update the array which should also update your view
// Do whatever you want when a card is changed to liked.
}
}
У вас есть 3 страницы. На каждой странице должна быть своя кнопка "Мне нравится", со своим цветом и значком. Таким образом, цвет и значок должны быть свойствами страницы, а не свойствами компонента, отображающего все страницы. В противном случае у вас будет только один цвет и один значок. Или вы можете иметь компонент кнопки Like и использовать один такой компонент для каждой страницы.