как перенести существующий элемент div из одного столбца в другой, если один элемент div удален из этого столбца в angular 6

Question

На этом изображении выше есть 3 столбца, каждый из которых имеет 3 поля ввода, во втором столбце - один элемент div, который отображается как пустое пространство, я хочуэтот div из следующего столбца должен быть перемещен во 2-й столбец, и если будет другая строка, то div из столбца этой строки также будет сдвинут, так что ..

На изображении выше файл component.html

Если есть какой-либо программный способ сделать это в файле component.ts.

Answer 1

Нет необходимости добавлять несколько <div class="row">. Спасибо

<div class="row">
  <div class="col-sm-4" *ngIf="isCompanyname">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isRatingstatus">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isIndustry">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isClientclassificationbd">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isSector">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isSubindustry">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isCompanycode">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isIndustrygroup">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isSilmapping">
    <div class="form-group"></div>
  </div>
</div>

Answer 2

Изменить ваш HTML

<div class="container">
  <div class="row">
    <div class="col-sm-4" *ngIf="isCompanyname">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
     <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
   <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4" *ngIf="isCompanyname">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
     <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
   <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4" *ngIf="isCompanyname">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>

    <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
  </div>
</div>

https://jsfiddle.net/7u96mhp3/1/