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);
}

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

1 个答案: