如何使图标的工作方式类似于 5/6 角的按钮? [英] How to make icon work similar to button in angular 5/6?

问题描述

我正在编写代码来编辑帐户信息中的名称，按钮工作正常，但我希望编辑按钮作为图标(铅笔).Icon 不支持 ngIf，有什么替代方法吗?(Angular 5/6)我的代码如下:

<mat-form-field class="example-full-width" *ngIf="edit"><input matInput placeholder="输入姓名.[(ngModel)]="姓名"></mat-form-field><span *ngIf="!edit">名称:{{name}}</span>
<div class="example-button-row"><button mat-raised-button color="primary" *ngIf="!edit"(click)="onEdit()">编辑</button><button *ngIf="edit" mat-raised-button color="primary"(click)="onEdit()">提交

代码输出:

解决方案

:) 将其添加到答案中以使其计数！只需在按钮标签内放置一个图标，如下所示:

<按钮垫高按钮颜色=主要"(点击)="onEdit()"><span *ngIf="!edit">编辑</span><span *ngIf="edit" >将您的图标放在这里 </span>

I'm writing a code to edit names in account information and button works fine but i want edit button as an icon (pencil). Icon does not support ngIf, is there any alternative? (Angular 5/6) My code is as follows:

<div>
   <mat-form-field class="example-full-width" *ngIf="edit">
    <input matInput placeholder="Enter name . [(ngModel)]="name">
   </mat-form-field>
   <span *ngIf="!edit">Name : {{name}}</span>
</div>
<div class="example-button-row">
   <button mat-raised-button color="primary" *ngIf="!edit" 
    (click)="onEdit()">Edit</button>
   <button *ngIf="edit" mat-raised-button color="primary" 
    (click)="onEdit()">Submit</button> 
</div>

Code Output:

解决方案

:) adding it to the answer to make it count! Just put an icon inside the button tag like this:

<button
    mat-raised-button
    color="primary"
    (click)="onEdit()">
    <span *ngIf="!edit">Edit</span>
    <span *ngIf="edit" > Put your icon here </span> 
</button>

这篇关于如何使图标的工作方式类似于 5/6 角的按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！