代碼如下：

<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>

我想提取中間的元素做成動態(tài)表單，其中<div class="weui-cells lists">一部分作為外層，然后遍歷里面的部分，暫時是這樣寫的：

<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： <div [formGroup]="form"> <div [ngSwitch]="option.controlType"> 破壞了html結(jié)構(gòu)，導(dǎo)致樣式出現(xiàn)錯誤，請問我該如何修改才能讓最外層的div不占用html標(biāo)簽?zāi)兀?/p>