动态更改离子按钮的 color/Fill

Question

首先我需要提到我是 ionic/angular 的新手……我有一个 api 服务调用 returns json 充满数据。正如您在捕获中看到的那样，我有区域列表和 sousRegions ……选择（区域和 sous 区域）后，我必须显示一个数字地图作为键，并将数字列表作为值显示为按钮。我需要更改所选键的离子按钮 color/fill 及其值。例子;如果用户选择第 1 级的第一个按钮，我需要将第一个按钮的填充属性设为“实体”，将同一级别的其他按钮设为“轮廓”，第 2 级的按钮与第 1 级的选择按钮（轮廓）相同.

capture

<!--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 中您创建了一个 class 变量来存储您的按钮填充属性：

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

然后根据需要更改按钮填充：myButtonFills[myButtonIndex] = 'solid'。您可以在需要时在代码中执行此操作（在 my-class.page.ts 中）。要 link 它与您的用户界面，只需使用括号创建单向绑定：

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

数组myButtonFills的修改（刷新）是您在代码中必须注意的事情。

或者你可以像这样在绑定中调用函数（可能是getter）：

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

所以在您的 myClass.page.ts 中会有一个函数 public getButtonFill(buttonId: any): string 计算给定按钮 ID 的适当按钮填充。这可能很容易实现，但由于 Angular 的更改检测器，有时会导致对函数的循环调用。

希望对您有所帮助。

动态更改离子按钮的 color/Fill

Change the color/Fill of an ion-button dynamically

typescript

angular

ionic4