在使用Angular的时候如何避免破坏html结构？

开源之夏第三届火热来袭，高校学生参与赢万元奖金！>>>

类似这样的代码：

      <div class="weui-cells lists">
        <div class="weui-cell">
          <div class="weui-cell__bd ">
            <p>姓名:</p>
          </div>
          <div class="weui-cell__ft">王xx</div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd ">
            <p>出生日期:</p>
          </div>
          <div class="weui-cell__ft">2018-01-21</div>
        </div>
        <div class="weui-cell weui-cell_select weui-cell_select-after">
          <div class="weui-cell__hd">
            <label for="" class="weui-label">民族:</label>
          </div>
          <div class="weui-cell__bd">
            <select class="weui-select" name="select2">
              <option selected="true" disabled="true">请选择</option>
              <option value="1">汉</option>
              <option value="2">其他</option>
            </select>
          </div>
        </div>
    </div>

我想提取中间的div做动态表单，我暂时是这样写的：

<div [formGroup]="form">
  <div [ngSwitch]="option.controlType">
    <!--span-->
    <div *ngSwitchCase="'span'" class="weui-cell">
      <div class="weui-cell__bd ">
        <p>{{option.label}}:</p>
      </div>
      <div class="weui-cell__ft">王xx</div>
    </div>
    <!--input-->
    <!--select-->
    <div *ngSwitchCase="'select'" class="weui-cell weui-cell_select weui-cell_select-after">
      <div class="weui-cell__hd">
        <label for="" class="weui-label">民族:</label>
      </div>
      <div class="weui-cell__bd">
        <select class="weui-select" name="select2">
          <option selected="true" disabled="true">请选择</option>
          <option value="1">汉</option>
          <option value="2">其他</option>
        </select>
      </div>
    </div>
  </div>
</div>

但是外面的两个div(一个formGroup，一个ngSwitch)已经破坏了html结构，导致样式错误。

请问这种情况如何避免呢？是否有什么办法可以不占用标签的使用条件语句？