Angular2,在复选框中需要一些帮助,

时间:2016-08-11 14:11:15

标签: angular

我陷入了开发阶段,我在视图部分有几个复选框,这一切都来自动态文件

这些是创建动态的输入类型复选框。 所有复选框的主数据

{
    "data" : [
        { "id": "1" , "value": "xyz" },
        { "id": "2" , "value": "abc" },
        { "id": "3" , "value": "abc1" },
        { "id": "4" , "value": "abc2" },
        { "id": "5" , "value": "abc3" },
        { "id": "6" , "value": "abc4" },
        { "id": "7" , "value": "abc5" }
    ]
}

这些应该来检查

[
{
    "id":"1","name":"xyz"
},
{
    "id":"2","name":"abc"
}
]

模板上的代码

<div class="ListSection" *ngFor="let why of whyClassification">
    <p> {{why.value}} </p>
    <div class="checkbox checkbox-inline">
        <input type="checkbox" id="why_{{why.id}}" value="{{why.id}}" checked="confirmAvailability(why.id,'why')">
        <label></label>
    </div
</div>

我尝试过在其中添加功能但是在视图创建期间没有调用,是否有任何视图可以实现我的目的。

2 个答案:

答案 0 :(得分:1)

将属性(例如checked)绑定到Angular 2中的表达式的模板语法是括号。

<div class="ListSection" *ngFor="let why of whyClassification">
  <p> {{why.value}} </p>
  <div class="checkbox checkbox-inline">
      <input type="checkbox" id="why_{{why.id}}" [value]="why.id" [checked]="confirmAvailability(why.id,'why')">
      <label></label>
  </div>
</div>

答案 1 :(得分:0)

您所要做的就是将checked字段初始化为true。 你的代码应该是这样的:

   <div class="ListSection" *ngFor="let why of whyClassification">
        <p> {{why.value}} </p>
        <div class="checkbox checkbox-inline">
            <input data-ng-if="why.id == '1' || why.id == '2'" "type="checkbox" id="why_{{why.id}}" value="{{why.id}}" checked="true">
            <input data-ng-if="why.id != '1' || why.id != '2'" "type="checkbox" id="why_{{why.id}}" value="{{why.id}}" checked="false">
            <label></label>
        </div>
    </div>