如何有條件地添加墊升按鈕？

Question

我的屏幕上有一個按鈕，如果用戶已經添加了點擊它，它是一個墊子填充按鈕，但如果我沒有點擊它，它是一個墊子按鈕

我的代碼看起來像這樣

 <button
          *ngIf="myVote !== 'UPVOTE'"
          mat-button
          color="primary"
          (click)="onVote('UPVOTE')"
        >
          UPVOTE
        </button>
        <button
          *ngIf="myVote === 'UPVOTE'"
          mat-flat-button
          color="primary"
          (click)="onVote('NONE')"
        >
          UPVOTE
        </button>

基本上我有兩個按鈕，只有一個顯示。 顯然，這是非常丑陋的。

有沒有一種方法可以讓我只用一個按鈕實現相同的結果，並且它有條件地是基於一組邏輯的mat-flat-button或mat-button ？

Answer 1

試試這樣：

<button
  mat-button 
  [class.mat-flat-button]="myVote === 'UPVOTE'"
  color="primary"
  (click)="onVote(myVote === 'UPVOTE'? 'NONE' :'UPVOTE')"
>
  UPVOTE
</button>

見工作演示

_ 我在演示中使用了凸起的按鈕以獲得更好的可見性。

Answer 2

接受答案的替代方法是使用[ngClass] 。 使用ngClass為您提供了更大的靈活性和對未來不斷變化的需求的控制。

接受答案並將其修改為使用ngClass將如下所示：

<button
  mat-button 
  [ngClass]="{'mat-flat-button': myVote === 'UPVOTE'}"
  color="primary"
  (click)="onVote(myVote === 'UPVOTE'? 'NONE' :'UPVOTE')"
>
  UPVOTE
</button>

我推薦這個而不是簡單地使用[class]屬性的原因是，如果您希望將來對按鈕應用新條件，它會更容易。 例如，當upvote 為'NONE'時，您想要一個不同的mat類

您現在可以輕松地添加到對象，它變成：

<button
  mat-button 
  [ngClass]="{'mat-flat-button': myVote === 'UPVOTE', 'mat-stroked-button': myVote === 'NONE'}"
  color="primary"
  (click)="onVote(myVote === 'UPVOTE'? 'NONE' :'UPVOTE')"
>
  UPVOTE
</button>

在此處查看ngClass的文檔： https ://angular.io/api/common/NgClass

Answer 3

從這個答案： https ://stackoverflow.com/a/36745752/1471485

你可以這樣做：

<button
  [attr.mat-button]="myVote !== 'UPVOTE'"
  [attr.mat-flat-button]="myVote === 'UPVOTE'"
  color="primary"
  (click)="onVote()"> <!-- Alternate the vote in the function -->
  UPVOTE
</button>

onVote(){
   if(this.myVote === 'UPVOTE') this.myVote = 'NONE';
   else this.myVote = 'UPVOTE';
}