Невозможно определить, почему пространство появляется в кнопках в angular2 html

Question

Первоначально моя страница выглядит так, с одним текстовым полем ввода, кнопкой «+» и кнопкой «-». Изображение -

Теперь, если я нажму на кнопку «+», размер между первым текстовым полем и кнопкой увеличится. Пожалуйста, посмотрите -

Изображение -

Пожалуйста, объясните, почему появляется такой пробел. Этот пробел не появляется, когда я нажимаю на последующие кнопки «+».

код -

app.component.html

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

  <table align="center">

    <tbody>
        <tr>
            <td>
                <input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
              </td>
            <td>
              <button type="button" style="margin-left: 10px" (click)="addOneMore()" 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" >
             <div #myElement>
            <td >
              <input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
            </td>
            <td>
              <button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
            </td>
            <td>
              <button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
            </td>
          </div>
          </tr>


      <tr>

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

</div>

Answer 1

Итак, вот мой ответ, я думаю, что он поможет вам в вашей проблеме, вы использовали класс в каждой кнопке с именем "btn", и он содержит по умолчанию заполнение отступов: .375rem .75rem; так что вы угадываете мой ответ, вы должны удалить его, и вы будете в порядке. когда отступы не были удалены из класса btn при удалении отступа из класса btn только что отмечен после комментирования этого дополнения btn на рисунке

Answer 2

Я сделал это -

app.component.ts

   deleteOneMore(){

    this.containers.splice(this.index, 1);
    }

app.component.html

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

Answer 3

Это из-за дополнительных div внутри tr. заменить div на ng-container.

  <tr *ngFor="let container of containers" >
         <ng-container #myElement>
        <td >
          <input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
        </td>
        <td>
          <button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
        </td>
        <td>
          <button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
        </td>
      </ng-container>
      </tr>

OR

Вы можете поместить ссылку myElement на уровень tr

 <tr *ngFor="let container of containers" #myElement >
         <ng-container >
        <td >
          <input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
        </td>
        <td>
          <button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
        </td>
        <td>
          <button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
        </td>

      </tr>