[英]How do I conditionally add mat-raised-button?
I have a button on my screen where if the user has already added clicked on it, it is a mat-filled-button but if I haven't clicked on it, it is a mat-button我的屏幕上有一个按钮,如果用户已经添加了点击它,它是一个垫子填充按钮,但如果我没有点击它,它是一个垫子按钮
My code looks like this我的代码看起来像这样
<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>
Basically I have two buttons and only one shows.基本上我有两个按钮,只有一个显示。 Obviously, this is very ugly.显然,这是非常丑陋的。
Is there a way where I can achieve the same outcome with only one button and it conditionally is a mat-flat-button
or a mat-button
based on a set of logic?有没有一种方法可以让我只用一个按钮实现相同的结果,并且它有条件地是基于一组逻辑的mat-flat-button
或mat-button
?
Try like this:试试这样:
<button
mat-button
[class.mat-flat-button]="myVote === 'UPVOTE'"
color="primary"
(click)="onVote(myVote === 'UPVOTE'? 'NONE' :'UPVOTE')"
>
UPVOTE
</button>
See Working Demo见工作演示
_ I have used raised button the demo for better visibility. _ 我在演示中使用了凸起的按钮以获得更好的可见性。
An alternative to the accepted answer would be to use [ngClass]
.接受答案的替代方法是使用[ngClass]
。 Making use of ngClass
gives you more flexibility and control for future changing requirements.使用ngClass
为您提供了更大的灵活性和对未来不断变化的需求的控制。
Taking the answer and just modifying it to use ngClass
instead would look like this:接受答案并将其修改为使用ngClass
将如下所示:
<button
mat-button
[ngClass]="{'mat-flat-button': myVote === 'UPVOTE'}"
color="primary"
(click)="onVote(myVote === 'UPVOTE'? 'NONE' :'UPVOTE')"
>
UPVOTE
</button>
The reason I would recommend this over simply using the [class]
attribute, is it makes it easier if you want to apply new conditions to the button in the future.我推荐这个而不是简单地使用[class]
属性的原因是,如果您希望将来对按钮应用新条件,它会更容易。 For example, you want a different mat
class when the upvote is 'NONE'
例如,当upvote 为'NONE'
时,您想要一个不同的mat
类
You can now easily just add to the object and it becomes:您现在可以轻松地添加到对象,它变成:
<button
mat-button
[ngClass]="{'mat-flat-button': myVote === 'UPVOTE', 'mat-stroked-button': myVote === 'NONE'}"
color="primary"
(click)="onVote(myVote === 'UPVOTE'? 'NONE' :'UPVOTE')"
>
UPVOTE
</button>
See the documentation for ngClass
here: https://angular.io/api/common/NgClass在此处查看ngClass
的文档: https ://angular.io/api/common/NgClass
From this answer: https://stackoverflow.com/a/36745752/1471485从这个答案: https ://stackoverflow.com/a/36745752/1471485
You could do something like this:你可以这样做:
<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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.