角垫复选框动态与ngModel

Posted 2023-03-13

【中文标题】角垫复选框动态与ngModel

【英文标题】：angular mat-checkbox dynamically with ngModel

【发布时间】：2018-05-03 04:54:37

【问题描述】：

我有一个类 Offer，它有一个属性“单位”作为对象数组。

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


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

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

html代码如下：

<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>    

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));

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

我做错了什么？？

【问题讨论】：

您能为此创建一个演示吗？我什至想知道这段代码是否有效，因为根据我所看到的，我认为这段代码实际上会引发错误。

如果有控制台错误，您可以添加吗？

您找到解决方案了吗？如果你找到了，请分享。

【参考方案1】：

从您的mat-checkbox 中添加[checked]="unit.checked" 并删除ngModel、id 和name。当您加载页面时，这会进行一种方式绑定，但要使两种方式绑定工作，您需要执行类似我在项目中所做的类似操作：

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

将您的 HTML 更改为：

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

将此添加到组件文件中：

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

编辑/更新：最近找到了一种无需明确处理即可进行双向绑定的解决方案

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

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>

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

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>

【参考方案2】：

这项工作对我来说是在 Angular 7 中测试的。

只是为了确保每个复选框的名称都是唯一的

<mat-grid-list cols="4" rowHeight="100px">
                    <mat-grid-tile *ngFor="let item of aspNetRolesClaims" [colspan]="1" [rowspan]="1">
                        <span>item.claimValue</span>
                        <mat-checkbox [(ngModel)]="item.claimValue" name="item.claimType">item.claimType</mat-checkbox>
                    </mat-grid-tile>
                </mat-grid-list>

【参考方案3】：

我在 Angular 7 中进行了测试，根据您的问题，我找不到任何错误，您可以在此 StackBlitz example 中看到 工作演示，但这是我的回答。

为了工作，您必须为您的 ngModel 绑定输入提供一个唯一的 name。

获取代码示例：

<div *ngFor="let unit of model.units; let i=index">
  <mat-checkbox 
    [(ngModel)]="model.units[i].checked"
    id="units-i" 
    name="units-i" // using plain slug-case instead of array notation
  >
       unit.name 
  </mat-checkbox>                        
</div> 

我不喜欢在这些情况下使用数组表示法 (units[i])，因为这意味着所有字段都连接在同一事物中，但是由于您的代码似乎可以工作，这只是一种偏好，而不是导致错误。

【参考方案4】：

如果您不能像使用FormGroup 时那样使用[(ngModel)]，您可以执行以下操作。代码假定 obj 是自定义对象并具有 IsSeleted 属性。

<mat-checkbox [checked]="obj.IsSelected"                                      
 (change)="onSelectionChanged($event, obj)">obj.Name
</mat-checkbox>

在 onSelectionChanged 里面，手动更新 obj.IsSelected

public onSelectionChanged(arg: MatCheckboxChange, obj:any) 
 obj.IsSelected = arg.checked;