Изменить цвет / Заполнить ионную кнопку динамически

Question

Начнем с того, что упомяну, что я новичок в области ионного и углового ... У меня есть сервисный вызов un api, который возвращает json полный данных. как вы видите на снимке, у меня есть список регионов и sousRegions ... после выбора (регионы и sous регионов) мне нужно отобразить MAP числа в виде ключей и и список чисел в качестве значений в виде кнопок. мне нужно изменить цвет иона кнопки и заливки выбранного ключа и его значений. Пример; Если пользователь выбирает кнопку «Первый» на уровне 1, мне нужно присвоить атрибуту заполнения первой кнопки значение «Solid», а другим кнопкам того же уровня - «контур», а кнопкам уровня 2 - кнопку «1» (контур). .

захват

<!--Transport Names-->

  <ion-grid>

    <ion-row>

       <ion-label>

         Transports

       </ion-label>

    </ion-row>

    <ion-row>

      <ion-col size="3"  *ngFor="let tr of transports">

        <ion-list>

          <ion-button size="small" color="dark" mode="md" (click)="getSelectedTransport(tr)">

            <ion-label>{{tr.name}}</ion-label>

          </ion-button>

        </ion-list>

      </ion-col>

    </ion-row>

  </ion-grid>

  <ion-item-divider mode="ios"[hidden]=hideTrKeys>

  </ion-item-divider>

<!-- Transport Keys-->

level 1 

  <ion-grid>

    <ion-row>

      <ion-col size="3" *ngFor="let t of trmap | keyvalue">

          <ion-button size="small" fill="{{btFill}}"  mode="md" (click)="getSelectedTrKey(t.key)">

            <ion-label>{{t.key}}</ion-label>

          </ion-button>

      </ion-col>

    </ion-row>

  </ion-grid>

  <ion-item-divider mode="ios" [hidden]=hideTrValues >

  </ion-item-divider>

  level 2

  <!-- transport Values  -->

  <ion-grid>

    <ion-row>

      <ion-col size="3" *ngFor="let v of trValues">

          <ion-button size="small" mode="md" (click)="getSelectedTrValue(v)">

            <ion-label>{{v}}</ion-label>

          </ion-button>

      </ion-col>

    </ion-row>

  </ion-grid>

это функции, которые я использую для отображения кнопок уровня 1 и 2

getSelectedTransport(t :Transport) {
      console.log(t)
      this.trmap=t.trMap
      this.trValues=null
      console.log(this.trmap)
      this.hideTrKeys=false

  }
  getSelectedTrKey(key :number) {
    console.log(key)
    this. trValues=this.trmap[key] ;
    console.log(this.trValues)
    this.hideTrValues=false
    this.myButtonFills[key]='outline'  
}
getSelectedTrValue(v:number){
  console.log(v)
}

Answer 1

Вы можете сделать это очень легко с помощью односторонней привязки. Итак, в my-class.page.ts вы создаете переменную класса для хранения ваших свойств заполнения кнопки:

export class MyClass {
   public myButtonFills: string[];
}

Затем измените заполнение кнопок по своему усмотрению: myButtonFills[myButtonIndex] = 'solid'. Вы делаете это в своем коде всякий раз, когда вам это нужно (в my-class.page.ts). Чтобы связать его с вашим пользовательским интерфейсом, просто используйте скобку для создания односторонней привязки:

<ion-button [fill]="myButtonFills[thisButtonIndex]">Button</ion-button>

Модификация (refre sh) массива myButtonFills - это то, что вы должны позаботиться в своем код.

В качестве альтернативы вы можете вызвать функцию (может быть, получатель) в привязке, например:

<ion-button [fill]="getButtonFill(thisButtonId)">Button</ion-button>

Так что в вашем myClass.page.ts будет функция public getButtonFill(buttonId: any): string, который вычисляет соответствующую заливку кнопки для данного идентификатора кнопки. Это может быть легко сделать, но иногда приводит к l oop вызовам функций из-за детектора изменений Angular.

Надеюсь, это поможет.