angular - Ionic 3工具栏按钮不会从轮廓更改为实体

我正在尝试动态地将离子3工具栏上的一个按钮从outline更改为solid，但是我不能。
我的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]似乎也会被覆盖。

最佳答案

这里的问题是外部的<ion-buttons end>按钮。你需要删除它。如果你有任何问题来对齐按钮，那么你可以使用ionic grid。而且你不需要给solid，因为它是default。

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

工作stackblitz

关于angular - Ionic 3工具栏按钮不会从轮廓更改为实体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47209877/