Angular 4-單擊更改事件按鈕

Question

我有三個按鈕可將主機添加到列表（添加，刪除和編輯），我希望在添加主機時可以對其進行編輯，但是我有個主意，我找不到解決方法，我希望當我按下編輯圖標時，要編輯的主機進入文本空間，並且添加按鈕變為保存圖標，你們中的有些人可以幫我嗎？

<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

這是一個示例。

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示例