Angular2双向绑定与Semantic ui Slider复选框

时间:2017-10-05 19:09:22

标签: angular angular2-forms semantic-ui

我在Angular2中使用JSON Schema动态创建了Semantic UI滑块复选框。 我用输入框测试了Angular2双向绑定工作正常。但是使用滑块复选框,它给了我一个错误

  

无法读取未定义的属性“值”

这是我的component.html这里我使用两种类型的滑块复选框一种是输入类型有收音机而另一种是输入类型有复选框。

<div *ngFor="let t of arrayTypeArray; let i=index;">
<label>{{LabelToDisplay[i][0]}}</label>
<div *ngFor="let typeLiteral of sementicClass[i];let j=index;" (change)="disp();">
     <div class="ui form"  *ngIf="typeLiteral === 'base' ">
        <div class="grouped fields">   
            <div class="field">
                <div class="ui slider checkbox">
                    <input type="radio" name="throughput" checked="checked" [(ngModel)]="infoData[arrayLabelArrayKeys[i][j]]['Value']"> <!-- error-->
                    <label>{{LabelToDisplay2[i][j]}}</label>
                </div>
            </div>
        </div>
     </div>

    <div class="field" *ngIf="typeLiteral === 'alpha' ">    
        <div class="ui slider checkbox">  
        <input type="checkbox" name="newsletter">
        <label>{{LabelToDisplay2[i][j]}}</label>
        </div>
    </div>
</div>

任何人都可以帮助我如何使用语义ui滑块复选框进行双向绑定吗?

提前致谢。

1 个答案:

答案 0 :(得分:1)

您可以使用ngModel。

 <div *ngIf="data === 'boolean'">
      <label for="{{labels[i]}}">{{labels[i]}}</label>
      <input type="checkbox" class="checkbox-inline" (change)="getJSON()" [(ngModel)]="model[labels[i]]" name="{{labels[i]}}">
 </div>