typescript 使用ngModel动态生成Angular 材质复选框

fquxozlt  于 2022-11-26  发布在  TypeScript
关注(0)|答案(5)|浏览(163)

我有一个类Offer,它有一个属性“units”作为对象数组。

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>

单位属性是使用以下方法加载的:

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值。
我做错了什么?

luaexgnf

luaexgnf1#

添加[checked]="unit.checked"并从mat-checkbox中删除ngModelidname。当你加载页面时,这会进行单向绑定,但是要进行双向绑定,你需要做一些类似于我在项目中做过的事情:
在更改时传递$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>
okxuctiv

okxuctiv2#

这对我的工作测试在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>
zzoitvuj

zzoitvuj3#

我在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}}]),因为这意味着所有字段都连接在同一个东西中,但由于您的代码似乎可以工作,这只是一个首选项,而不是错误的原因。

wfauudbj

wfauudbj4#

如果不能像使用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;
}
3b6akqbq

3b6akqbq5#

还有一种可能更简单的方法。这种方法在表单组中运行良好

<form [formGroup]='formGroup'>
    <mat-checkbox [(ngModel)]="obj.IsSelected" [ngModelOptions]="{standalone:> true}">
        {{obj.Name}}
    </mat-checkbox>
</form>

相关问题