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

哎码 发布于 2018/04/10 21:28
阅读 183
收藏 0

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

类似这样的代码:

      <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结构,导致样式错误。

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

加载中
0
哎码
哎码
该评论暂时无法显示,详情咨询 QQ 群:点此入群
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部