动态更改离子按钮的颜色/填充

Question

首先需要提一下，我是 ionic/angular 的新手……我有一个 api 服务调用，它返回一个充满数据的 json。正如您在捕获中看到的那样，我有区域和 sousRegions 列表......在选择（区域和 sous 区域）后，我必须将数字的 MAP 显示为键，并将数字列表显示为按钮的值。 我需要更改所选键的离子按钮颜色/填充及其值。 例子;如果用户选择 1 级的第一个按钮，我需要将第一个按钮的填充属性设置为“Solid”，将相同级别的其他按钮设置为“轮廓”，并且将 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 中，您创建了一个类变量来存储您的按钮填充属性：

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

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

<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 的变更检测器，有时会导致对函数的循环调用。

希望对你有帮助。