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

Posted 2023-02-22

【中文标题】如何有条件地添加垫升按钮？

【英文标题】：How do I conditionally add mat-raised-button?

【发布时间】：2020-01-15 00:29:52

【问题描述】：

我的屏幕上有一个按钮，如果用户已经添加了点击它，它是一个 ma​​t-filled-button 但如果我没有点击它，它是一个 垫子按钮

我的代码是这样的

 <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？

【问题讨论】：

这些可能会有所帮助：***.com/questions/44597077/… 和 ***.com/questions/37021355/…

看看这个：***.com/questions/36745734/…

为什么不使用按钮切换：material.angular.io/components/button-toggle/overview?

你试过解决方案了吗？

【参考方案1】：

试试这样：

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

见Working Demo

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

【讨论】：

只是想知道为什么它是 mat-button 而不是 [class.mat-button]="myVote !== 'UPVOTE'"？

因为即使未设置 myVote，您也希望显示垫子按钮

【参考方案2】：

来自这个答案：https://***.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';

【讨论】：

嗨，所以我认为从概念上讲，您的回答比 Adrita Sharma 的回答要好 - 她正在更新课程，这基本上需要了解 mat-button 和 mat-flat-button 在表面下的作用。但是，您的答案实际上不起作用，因为 mat-button 和 mat-flat-button 是 MatButton 组件中的选择器，我认为您不能将其设为有条件的...

我不知道，我现在只是在查看github.com/angular/components/blob/master/src/material/button/…，但它似乎只检查该选择器是否存在，如果存在，则添加一个类

与[attr.mat-button] & [attr.mat-icon-button] 不幸的是，它不起作用。例如，有一些指令可以使用这种符号，例如 [attr.mat-align-tabs] ，但 mat-button 不起作用。