angular - angular2 + 动态添加/删除后无法重新调用按钮

Question

我创建了一个文本框并水平附加了添加 (+) 和删除 (-) 按钮。第一个按钮没有删除部分。它的形象是——

在这里，由于编码依赖性，我使添加 (+) 按钮在第一次添加后消失。

现在，在完成所需的添加/删除之后，我得到的 UI 为 -

**控制台输出**

 inside addOne(), ngModel = 1
inside addOne , selectedAPIName = ["1"]
inside addOneMore , selectedAPIName = (2) ["1", "2"]
inside addOneMore , selectedAPIName = (3) ["1", "2", "3"]
inside addOneMore , selectedAPIName = (4) ["1", "2", "3", "4"]

但是，反复单击删除按钮后，我最终会像这样，在所有删除后没有任何重新启动或重新调用的按钮-

请帮忙。是否有办法在不重新加载页面的情况下重新开始？

代码- app.component.html

<div *ngIf="addContainer">
  <p style="margin-left: 200px; font-size:18px">Please enter the API Object -</p>

  <table align="center">

    <tbody>
      <tr>
        <td>
          <input *ngIf="addMore" type="text" placeholder="Enter a Node" [(ngModel)]="firstApiMining">
        </td>
        <td>
          <button type="button" style="margin-left: 10px" *ngIf="clickAgain" (click)="addOne(firstApiMining)" class="btn btn-success"> + </button>
        </td>
        <!-- <td>
          <button type="button" style="margin-left: 10px" class="btn btn-danger"> - </button>
        </td> -->
      </tr>



      <tr *ngFor="let container of containers; let i = index;" [(ngModel)]="miningname" #myElement ngDefaultControl>
        <ng-container>
          <td id="1myElement">
            <input *ngIf="addMore" type="text" placeholder="Enter a Node">
          </td>
          <td id="1myElement">
            <button type="button" style="margin-left: 10px" (click)="addOneMore(miningname)" class="btn btn-success"> + </button>
          </td>
          <td>
            <button type="button" style="margin-left: 10px" (click)="deleteOneMore(i)" class="btn btn-danger"> - </button>
          </td>
        </ng-container>
      </tr>



      <tr>

        <td style="text-align:center">
          <button type="button" (click)="showGraphs()" class="btn btn-dark">Search</button>
        </td>
      </tr>
    </tbody>
  </table>

</div>

app.component.ts

 addOne(firstApiMining){
    this.addContainer = true;
    this.addMore = true;
    this.clickAgain = false;
    this.containers.push(this.containers.length);
    console.log("inside addOne(), ngModel =", firstApiMining);
  this.selectedAPIName.push(firstApiMining);
  console.log("inside addOne , selectedAPIName =", this.selectedAPIName)
  }


  addOneMore(moreAPIName) {

      this.addContainer = true;
      this.addMore = true;
      this.containers.push(this.containers.length);
      this.selectedAPIName.push(moreAPIName);
      console.log("inside addOneMore , selectedAPIName =", this.selectedAPIName);
  }

  deleteOneMore(index){

      this.containers.splice(index, 1);
      console.log("this.index =", index)
      console.log("inside delete , api-mining-ngmodel-name = ", this.miningname);
      this.selectedAPIName.splice(index+1,1);
      console.log("inside deleteOneMore(), this.selectedAPIName =", this.selectedAPIName);
  }


  showGraphs() {
      console.log("inside showGraphs()")
      this.showEwayBill = true;
      this.showCollection = true;
       this.EwayBill();

  }

问题 2

请帮我解决这个问题-

我可以第一时间删除。但是当我删除所有以前的文本框时，我只剩下这个 -

控制台输出

 inside deleteOneMore(), this.selectedAPIName = ["1"]

再次单击添加 (+) 按钮，我得到此输出

**控制台输出**

 inside addOne , selectedAPIName = (2) ["1", "1"]

此处 --> “1”重复，因此数字序列不均匀，删除相关文本框值时出现问题

Answer 1

当您删除一个项目时，您需要检查它们是否不再有项目，如果为 true，则启用第一个项目的添加按钮:

deleteOneMore(index){
    this.containers.splice(index, 1);
    if(this.containers.length == 0){
        this.clickAgain = true;
    }
    console.log("this.index =", index)
    console.log("inside delete , api-mining-ngmodel-name = ", this.miningname);
    this.selectedAPIName.splice(index+1,1);
    console.log("inside deleteOneMore(), this.selectedAPIName =", this.selectedAPIName);
}