在使用Angular的时候如何避免破坏html结构?
< 返回列表时间: 2018-04-10来源:开源中国
HDC调试需求开发(15万预算),能者速来!>>>
类似这样的代码: <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结构,导致样式错误。
请问这种情况如何避免呢?是否有什么办法可以不占用标签的使用条件语句?
热门排行