angular - 如何有条件地添加 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>

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

有没有办法只用一个按钮就可以达到相同的结果，并且有条件地是 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>

见 Working Demo

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