Angular 4-单击更改事件按钮

Question

I have three buttons to add hosts to a list (add, remove and edit), i want that when i add a host, it can be edited, but i have an idea and i can't find a way to do it, i want that when i press the edit icon the host to be edited goes to the text space and the add button changes to an save icon, can some of you guys help me?

<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

Answer 1

Here is an example of doing it.

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>

Typescript:

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

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

Stackblitz example