单击Angular 4后，如何用输入替换链接

Question

我有一系列项目，每个项目都会显示一个链接。如果单击任何按钮，我想用输入文本框替换它。

*** Template ***
<ng-container *ngFor="let item of items">
  <p>
    <button id="item-{{ item.id }} " (click)="showInput($event, item.id)"></button>
  </p>
</ng-container>


  *** Component ***
  showInput(ev: MouseEvent, id:number){
    ev.stopPropagation();
    let inputHtml = `<input type=\'text\' id=\'${id}\'/>`;
    console.log(ev.srcElement);
    // Replace element with input
    console.log(id);
  }

Answer 1

这是一种方法（我还包括一个stackblitz：https://stackblitz.com/edit/angular-m47ktp）：

<ng-container *ngFor="let item of items">
  <p>
    <button *ngIf="item.show === true; else inputField"
            [id]="'item-' + item.id" 
            (click)="item.show = false">
          {{item.text}}
    </button>
    <ng-template #inputField >
        <input type="text" [id]="item.id" />
    </ng-template>
  </p>
</ng-container>

样本数据集：

 items: [
    {
      id: 1,
      text: 'Button 1',
      show: true,
    },
    {
      id: 2,
      text: 'Button 2',
      show: true,
    },
    {
      id: 3,
      text: 'Button 3',
      show: true,
    },
    {
      id: 4,
      text: 'Button 4',
      show: true,
    }
  ]

Answer 2

没有function或额外的努力，你可以这样做：

<ng-container *ngFor="let item of items">
  <p>
    <button *ngIf='!item.inputshow' id="item-{{ item.id }} " (click)="item.inputshow = !item.inputshow"> Button {{ item.id }} </button>
    <input *ngIf='item.inputshow' type='text' id='{{item.id}}' />
  </p>
</ng-container>

WORKING DEMO

*ngIf='!item.inputshow' 
// first it will check for inputshow (First time it will be undefined)
(click)="item.inputshow = !item.inputshow"
// but as soon as user clicks on it it will initialised as boolean true

Answer 3

最简单的方法如下。通过仅使用模板，您可以按如下方式执行此操作。通过使用* ngIf它不会在DOM中呈现或创建，除非条件为真。所以这是最好的方法。

<ng-container *ngFor="let item of items">
  <p>
    <button *ngIf="!item.isInputVisible"  (click)="item.isInputVisible=true"> {{ item.id }} </button>
    <input *ngIf="item.isInputVisible" type="text"  />
  </p>
</ng-container>