Question

我的屏幕上有一个按钮，如果用户已经添加了单击按钮，则它是一个填充垫按钮，但是如果我没有单击它，则它是一个< strong>垫按钮

我的代码如下

 <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

尝试这样：

%f

请参见Working Demo

_我已经使用了升高按钮的演示程序来获得更好的可见性。

Answer 2

从此答案开始：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';
}

如何有条件地添加垫高按钮？

2 个答案: