Angular 4 - 更改点击事件按钮

我有三个按钮来添加主机到列表（添加，删除和编辑），我想当我添加一个主机，它可以被编辑，但我有一个想法和我找不到这样做的方法，我希望当我按下编辑图标时，要编辑的主机将进入文本空间，并且添加按钮会变为保存图标，您可以帮助我们吗？Angular 4 - 更改点击事件按钮

<div class="ui fluid grid"> 
<div class="ten wide column"> 
    <form class="ui form"> 
    <div class="field"> 
     <label>Nome</label> 
     <input type="text"> 
    </div> 
    <div class="field"> 
     <label>Descrição</label> 
     <textarea></textarea> 
    </div> 
    <div class="field"> 
     <label>Formato</label> 
     <input type="text"> 
    </div> 
    <div class="field"> 
     <label>Qtd</label> 
     <input type="text"> 
    </div> 
    <div class="field"> 
     <label>Qtd de classes</label> 
     <input type="text"> 
    </div> 
    <button class="ui button" type="submit">Save</button> 
    </form> 
</div> 
<div class="five wide column"> 

    <form class="ui form"> 
     <div class="field"> 
      <label>Host</label> 
      <div class="ui action input"> 
       <input type="text" [(ngModel)]="host"> 
       <button class="ui basic icon button" *ngIf="editando"> 
        <b class="blue save icon"></b> 
       </button> 
       <button class="ui basic icon button" (click)="addHost(host.value)" *ngIf="!editando"> 
        <i class="green plus icon"></i> 
       </button> 
       <button class="ui basic icon button" (click)="removeHost(host.value)"> 
       <i class="red remove icon"></i> 
       </button> 
      </div> 
     </div> 
      <div class="field" *ngIf="hosts.length > 0"> 
      <label>Lista de Hosts</label> 
      <div class="ui middle aligned divided list" *ngFor="let hostname of hosts; let i = index"> 
      <div class="item"> 
       <div class="right floated content"> 
       <button class="ui tiny basic icon button" (click)="edit(i)"> 
        <i class="blue edit icon"></i> 
       </button> 
       <button class="ui tiny basic icon button" (click)="removeHost(host.value)"> 
        <i class="red remove icon"></i> 
       </button> 
       </div> 
       <div class="content"> 
       {{ hostname }} 
       </div> 
      </div> 
      </div> 
     </div> 

     </form> 


</div>

https://stackblitz.com/edit/angular-tdghcz?file=index.html

来源

2017-09-21 Milton Teixeira

你可以创建你的代码的plunkr /小提琴/ stackblitz？ – Eeks33

我不知道那是什么D :. –

将您的代码添加到此处并在此处分享编辑链接，然后我们可以更轻松地帮助您：https://stackblitz.com/edit/angular-nzpad4 – Eeks33

这里是做它的一个例子。

HTML：

<div> 
    <input *ngIf="editing == 1" type="text" [(ngModel)]="name"> 
    <span *ngIf="editing !==1 ">{{name}}</span> 
    <button (click)="editing === 1 ? save(1) : editing=1">{{editing===1 ?"Save" : "Edit"}}</button> 
</div> 
<br> 
<div> 
    <input *ngIf="editing == 2" type="text" [(ngModel)]="lastname"> 
    <span *ngIf="editing !== 2">{{lastname}}</span> 
    <button (click)="editing === 2 ? save(2) : editing=2">{{editing == 2? "Save" : "Edit"}}</button> 
</div>

打字稿：

name = 'John'; 
    lastname="Smith" 
    editing=0; 

    save(itemId){ 
    console.log('Save on %s was called', itemId); 
    this.editing=0; 
    }

Stackblitz example

来源

2017-09-21 19:07:32 Vega

我忘了说我正在使用语义UI，如果这有助于OO –

Angular 4 - 更改点击事件按钮

回答

相关问题