英文:
How to use ngIf inside a button?
问题
我有一个按钮，其中我需要在 PC 上显示整个按钮，但在移动设备上只显示按钮而不显示 commonActions.cancel。
我使用 isMobile() 函数来实现这一功能，但我不知道在哪里放置 ngIf，以便只添加/删除文本，而不影响按钮或图标。
英文:
I have a button
<button class="mx-2" mat-button type="button" (click)="close()"
name="buttonClose">
<mat-icon>cancel</mat-icon>
{{t('commonActions.cancel')}}
</button>
where i have to show the whole button when on PC but only show the button without commonActions.cancel when on mobile.
I use isMobile() function for that but i dont know where to place the ngIf, so that only the text gets added/removed, not the button or icon
答案1
得分: 5
你需要将文本放在文本标签内，例如（span、p...），然后在其中添加ngIf，以下是一个示例：
<button class="mx-2" mat-button type="button" (click)="close()"
name="buttonClose">
<mat-icon>cancel</mat-icon>
<span *ngIf="!isMobile()">{{t('commonActions.cancel')}}</span>
</button>
英文:
You need to put the text in a text tag like (span, p ... ) and add the ngIf inside it , here's an example :
<button class="mx-2" mat-button type="button" (click)="close()"
name="buttonClose">
<mat-icon>cancel</mat-icon>
<span *ngIf="!isMobile()" >{{t('commonActions.cancel')}}</span>
</button>
答案2
得分: 3
你最佳的选项是在这种情况下使用 <ng-container>：
<ng-container *ngIf="!isMobile()">{{t('commonActions.cancel')}}</ng-container>
英文:
your best option is to use <ng-container> in this case:
<ng-container *ngIf="!isMobile()">{{t('commonActions.cancel')}}</ng-container>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论