Изменить цвет кнопки Ioni c для определенной кнопки c не для всех - PullRequest
Новая
       7

Изменить цвет кнопки Ioni c для определенной кнопки c не для всех

1 голос
/ 12 июля 2020

У меня есть этот код для нескольких кнопок внутри Ngfor, и я хочу, чтобы только нажатая кнопка меняла цвет, а не все, как я могу это сделать?

. html: 

 <ion-col size="6"  *ngFor="let data of dataArray" >
    <ion-card>
     <ion-card-header>
       <ion-button  class="fav-icon2"  ion-button [color]="ionicNamedColor (click)="changecolor()" >  
        <ion-icon name="heart"></ion-icon>
       </ion-button>  
     </ion-card-header>
   </ion-card>
  </ion-col>

.ts: 

public ionicNamedColor: string = 'warning';

changecolor() {
    if(this.ionicNamedColor === 'warning') { 
      this.ionicNamedColor = 'primary'
    } else {
      this.ionicNamedColor = 'warning'
    }
}

Ответы [ 3 ]

1 голос
/ 12 июля 2020

здесь вы используете массив с именем dataArray для отображения кнопок на экране.

Добавьте еще одно свойство с именем clicked в объекте, используемом в dataArray .

Итак, всякий раз, когда вы вызываете метод changeColor, вы просто проверяете свойство, на которое щелкнули, и решаете, менять ли цвет или нет.

Итак, ваш файл должен быть обновлен со следующим кодом: 

<ion-col size="6"  *ngFor="let data of dataArray" >
<ion-card>
 <ion-card-header>
   <ion-button  class="fav-icon2"  ion-button [color]="data.isClicked?'warning':'primary" (click)="data.isClicked = !data.isClicked" >  
    <ion-icon name="heart"></ion-icon>
   </ion-button>  
 </ion-card-header>

Здесь не нужно ничего добавлять в ваш машинописный файл.

0 голосов
/ 12 июля 2020

Попробуйте это с помощью индекса кнопки .. 

<ion-col size="6"  *ngFor="let data of dataArray; index as i;" >
    <ion-card>
     <ion-card-header>
       <ion-button 
         class="fav-icon2"
         ion-button [color]="activeIndex==i ? 'warning' : 'primary'
         (click)="setIndex(i)" >  
        <ion-icon name="heart"></ion-icon>
       </ion-button>  
     </ion-card-header>
   </ion-card>
  </ion-col>

activeIndex;

setIndex(index) {
  this.activeIndex = index:
}

Примечание: вы можете изменить цвет в соответствии с условием ..

0 голосов
/ 12 июля 2020

Вы повторяете массив через ngFor l oop, это означает, что может быть создано много элементов кнопки, но у вас есть только одна переменная для атрибута цвета, поэтому изменение для одной кнопки должно изменить цвета для всех.

Сказав это, вам придется разработать механизм, чтобы каждый отображаемый элемент кнопки через ngFor должен получить собственную ссылку на цветовую переменную. Увидев ваш код, вы должны либо иметь переменную цвета внутри массива dataArray , либо поддерживать отдельный массив строк, равный по длине dataArray . Примерно так .. 

public colorArr:string[]= [];

//initially I've populated dataArray with initial colors.
public ngOnInit(){
this.dataArray.forEach(x=>this.colorArr.push('warning'));
}

Ваш HTML будет изменен, например, 

 <ion-col size="6"  *ngFor="let data of dataArray; let i = index" >
    <ion-card>
     <ion-card-header>
       <ion-button  class="fav-icon2"  ion-button [color]="colorArr[i]" (click)="changecolor(i)" >  
        <ion-icon name="heart"></ion-icon>
       </ion-button>  
     </ion-card-header>
   </ion-card>
  </ion-col>

И ваш метод changeColor будет изменен следующим образом 

changecolor(index) {
    if(this.colorArr[index] === 'warning') { 
      this.colorArr[index] = 'primary'
    } else {
      this.colorArr[index] = 'warning'
    }
}

По сути, мы сохраняем цвета в отдельном массиве для каждого отдельного элемента кнопки, не затрагивая исходный dataArray .

Другой подход Можно создать отдельный компонент только для элементов кнопки и передать соответствующие данные через декораторы @ input . В этом случае ваш подход с единственной переменной будет работать.

Спасибо.

...