使用 ngModel 动态调整角度垫复选框 [英] angular mat-checkbox dynamically with ngModel

问题描述

我有一个类 Offer，它有一个属性单位"作为对象数组.

export class Offer {公共属性A:字符串；公共属性B:字符串；公共单位:单位[]；}出口类单位{公共代码:字符串，公共名称:字符串，公共检查:布尔值}

我使用的是 Angular2，这些单位必须是用户可以选择的复选框.我也在使用角材料.

html 代码如下:

<mat-checkbox [(ngModel)]="model.units[i].checked"id="units[{{i}}]" name="units[{{i}}]">{{ 单位名称 }}</mat-checkbox>

units 属性加载使用:

this.model.units.push(new Unit("code1","name1", false));this.model.units.push(new Unit("code2","name2", false));this.model.units.push(new Unit("code3","name3", false));

当我发送表单时，checked 属性不包含选中的值.

我做错了什么??

解决方案

添加 [checked]="unit.checked" 并删除 ngModel, id 和 name 来自您的 mat-checkbox.当您加载页面时，这是一种方式绑定，但要使两种方式绑定工作，您需要做一些类似的事情，我在我的项目中做过这样的事情:

在更改时传递$event并手动设置组件文件中的值:

将您的 HTML 更改为:

<mat-checkbox [checked]="unit.checked"(change)="valueChange(model.units,unit,$event)">{{ 单位名称 }}</mat-checkbox>

将此添加到组件文件中:

valueChange(model.units, unit, $event) {//这里为事件的特定单元设置双向绑定model.units[unit].checked = $event.checked;}

EDIT/UPDATE:最近找到了一个没有明确处理的双向绑定的解决方案

确保 model.units 具有用于 checked 的属性.这是添加它的最简单方法:

component.ts:

this.model.units.forEach(item => {item.checked = false;//根据您的要求更改});

html:

 
<mat-checkbox [(ngModel)]="unit.checked" [checked]="unit.checked"name="{{i}}-name">//确保每个项目的名称都是唯一的</mat-checkbox>

如果您还想控制启用/禁用选项，请尝试添加:

component.ts:

this.model.units.forEach(item => {item.checked = false;//根据您的要求更改item.disabled = true;//根据您的要求更改});

html:

<mat-checkbox [(ngModel)]="unit.checked" [checked]="unit.checked"[禁用]="unit.disabled"name="{{i}}-name">//确保每个项目的名称都是唯一的</mat-checkbox>

I have a class Offer which have one property "units" as array of objects.

export class Offer {
   public propertyA: string;
   public propertyB: string;
   public units: Unit[];
}

export class Unit {    
    public code: string,
    public name: string,
    public checked: boolean
}

I am using Angular2, these units must be checkboxes the user can select. Also I am using angular material.

The html code looks like:

<div *ngFor="let unit of model.units; let i=index">
  <mat-checkbox [(ngModel)]="model.units[i].checked"
    id="units[{{i}}]" name="units[{{i}}]">
       {{ unit.name }}
  </mat-checkbox>                        
</div>    

The units property is loaded using:

this.model.units.push(new Unit("code1","name1", false));
this.model.units.push(new Unit("code2","name2", false));
this.model.units.push(new Unit("code3","name3", false));

When I send the form the checked property does not contains the checked value.

What am I doing wrong??

解决方案

Add [checked]="unit.checked" and remove ngModel, id and name from your mat-checkbox. This does one way binding when you load the page but to make the two way binding work you need to do something similar like this which i have done in my project:

Pass the $event on change and set the value in the component file manually:

Change your HTML to:

<div *ngFor="let unit of model.units">
  <mat-checkbox [checked]="unit.checked" 
  (change)="valueChange(model.units,unit,$event)">
       {{ unit.name }}
  </mat-checkbox>                        
</div>

Add this to Component file:

valueChange(model.units, unit, $event) {
        //set the two-way binding here for the specific unit with the event
        model.units[unit].checked = $event.checked;
    }

EDIT/UPDATE: Found a solution recently for two way binding without handling it explicitly

Make sure model.units have a property for checked. This is the easiest way to add it:

component.ts:

this.model.units.forEach(item => {
                       item.checked = false; //change as per your requirement
                    });

html:

 <div *ngFor="let unit of model.units;let i=index">
    <mat-checkbox [(ngModel)]="unit.checked" [checked]="unit.checked"                                                                                    
    name="{{i}}-name">  //make sure name is unique for every item                             
    </mat-checkbox>
</div>

If you want to control the enable/disable options as well try adding this:

component.ts:

this.model.units.forEach(item => {
                       item.checked = false;//change as per your requirement
                       item.disabled = true;//change as per your requirement
                        });

html:

<div *ngFor="let unit of model.units;leti=index">
        <mat-checkbox [(ngModel)]="unit.checked" [checked]="unit.checked"
         [disabled]="unit.disabled"                                                                                    
       name="{{i}}-name">//make sure name is unique for every item
        </mat-checkbox>
    </div>

这篇关于使用 ngModel 动态调整角度垫复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！