angular - Ionic 3 工具栏按钮不会从轮廓变为实心

Question

我试图将 Ionic 3 中工具栏上的按钮从“轮廓”动态更改为“实体”，但我做不到。

我的 HTML 代码如下:

<ion-toolbar>
  <ion-buttons end>
    <button ion-button 
    [outline]="testButtonOutline" 
    [color]="testButtonColor" 
    [solid]="testButtonSolid" 
    (click)="testMode()">
      {{testModeLabel}}
    </button>
  </ion-buttons>
  <ion-title left>Choose alert</ion-title>
</ion-toolbar>

我的.TS函数是:

testMode() {
  if (this.testModeState == false) {
    this.testModeLabel = 'Test Mode: On';
    this.testModeState = true;
    this.testButtonColor = 'primary';
    this.testButtonOutline = false;
    this.testButtonSolid = true;
  }
  else {
    this.testModeLabel = 'Test Mode: Off';
    this.testModeState = false;
    this.testButtonColor = 'Grey';
    this.testButtonOutline = true;
    this.testButtonSolid = false;
  }
}

当我引入 [solid]="testButtonSolid"选项时，即使 [solid] 设置为 false，[outline] 似乎也会被覆盖。

Answer 1

这里的问题是外部<ion-buttons end>按钮。您需要将其删除。如果您在对齐按钮时遇到任何问题，则可以使用 ionic grid .并且您不需要给出 solid因为它是default .

<button ion-button [outline]="testButtonOutline" [color]="testButtonColor" (click)="testMode()">
        {{testModeLabel}}
</button>

工作中stackblitz