невозможно повторно вызвать кнопку после динамического добавления / удаления в 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);
}