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

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';
}