使用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 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结构,导致样式出现错误,请问我该如何修改才能让最外层的div不占用html标签呢?

阅读 1.9k
2 个回答
<ng-container [formGroup]="form"></ng-container>

<ng-container [ngSwitch]="option.controlType"><ng-container>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进