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 example

Angular 4 - 单击时更改事件按钮

1 个答案: