在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ 使用Angular的時候如何避免破壞HTML結(jié)構(gòu)?

使用Angular的時候如何避免破壞HTML結(jié)構(gòu)?

代碼如下:

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

回答
編輯回答
祉小皓

前面寫了一些tips, 可以參考下。
ng-content/ng-container

2018年7月17日 02:07
編輯回答
默念
<ng-container [formGroup]="form"></ng-container>

<ng-container [ngSwitch]="option.controlType"><ng-container>
2017年5月24日 19:27