Question

我正在构建注册表单，并且必须处理通过* ngFor结构指令生成的多个复选框。

模板：

<div class="form-group">
        <label class="col-lg-3 control-label">Response Type</label>
        <div class="col-lg-7">
          <div class="checkbox" *ngFor="let type of client.responseTypes; let i = index">
            <label>
              <input type="checkbox" name="responseTypes" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}}
            </label>
          </div>
        </div>
      </div>

TS模型对象：

client.responseTypes = [
{ value: 'type1', checked: false},
          { value: 'type2', checked: true },
          { value: 'type3', checked: true }
];

正确存储已选中或未选中的场景背后的实际值。但是，复选框没有显示正确的值。

如果三个objects.checked == false中的一个，则所有复选框都将显示为未选中
仅当所有三个objects.checked == true时，才会在表单中检查所有三个。

我尝试在输入元素上摆弄[value]="client.responseTypes[i].checked"和[checked]="client.responseTypes[i].checked"，但没有成功。

正确方向的任何指针都非常受欢迎。

问候，克里斯

Answer 1

语法还可以，好吧，你也可以这样做

    @Override
protected final void doInvite(SipServletRequest request)
        throws ServletException, IOException {

    //DO STUFF
    System.out.println("RECEIVED AN INVITE");

    //      These lines generate a 500
    //      request.removeHeader("route");
    //      request.removeHeader("route");

    ProxyImpl p = (ProxyImpl) request.getProxy(true);
    p.setRecordRoute(false);
    p.setSupervised(true);
    p.setParallel(true);
    p.proxyTo(request.getRequestURI());
    p.startProxy();

问题出在其他地方（当你定义客户端时 - 我想你写的有点像this.client.responseTypes = ...-），你可以写

<input type="checkbox" name="responseTypes" [(ngModel)]="type.checked">

检查

Answer 2

好了，在试图解开为什么我的本地应用程序没有显示我想要的结果之后，我开始将我的表单组复制并粘贴到它所在的<form></form>元素中。 / p>

Ta-daa，它现在有效。

仅供参考：在<form></form>元素中放置* ngFor复选框会导致不必要的行为。

Answer 3

在角度中，每个模型与名称绑定，意味着您需要为每个表单元素赋予唯一名称

例如：

<div class="form-group"><label class="col-lg-3 control-label">Response Type</label>
    <div class="col-lg-7">
      <div class="checkbox" *ngFor="let type of client.responseTypes; let i = index">
        <label>
          <input type="checkbox" name="type.id" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}}
        </label>
      </div>
    </div>
  </div>

对象：

client.responseTypes = [{id: '1', value: 'type1', checked: false},
      {id: '2', value: 'type2', checked: true },
      {id: '3', value: 'type3', checked: true }];

现在检查:)谢谢

Angular 2 - 处理多个复选框已检查状态

3 个答案: