如何有条件地添加 mat-raised-button？

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>

基本上我有两个按钮，只有一个显示。显然，这是非常丑陋的。

有没有办法只用一个按钮就可以达到相同的结果，并且它有条件地是基于一组逻辑的amat-flat-button或 a mat-button？

Answer 1

像这样尝试：

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

见工作演示

_ 我在演示中使用了凸起按钮以获得更好的可见性。