[英]Angular - Check/Uncheck All Checkboxes
我的工作是完成以下功能。 我有 3 个复选框,选择一个后我希望另外两个也被选中。
我使用现成的组件来创建复选框。
<form [formGroup]="data" name="name" >
<div class="form-group">
<div class="form__element">
<nb-checkbox name="groupname" value="Check All" label="Check All" formControlName="isAgree" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}"></nb-checkbox>
</div>
</div>
<div class="features__box">
<section class="agreements">
<ul class="features__list">
<li class="features__item" *ngFor="let agreement of data.agreements.value">
<div class="form__element">
<nb-checkbox name="groupname" value={{agreement.description}} label={{agreement.description}} [checked]="myVar2" (change)="myVar2 = !myVar2"></nb-checkbox>
</div>
</li>
</ul>
</section>
<section class="statements">
<ul class="features__list">
<li class="features__item" *ngFor="let statement of data.statements.value">
<div class="form__element">
<nb-checkbox name="groupname" value={{statement.description}} label={{statement.description}} [checked]="myVar2" (change)="myVar2 = !myVar2"></nb-checkbox>
</div>
</li>
</ul>
</section>
</div>
</form>
我将[(ngModel)] =" myVar2 "[ngModelOptions] =" {standalone: true} "
到我的主复选框,并将[checked] =" myVar2 "(change) =" myVar2 =! myVar2 to my next checkbox.
在file.component.ts
文件中我添加了myVar2: boolean = false;
但是,上述解决方案不起作用。 我在控制台中收到以下错误
ERROR in src/app/file.component.html:64:66 - error NG8002: Can't bind to 'ngModelOptions' since
it isn't a known property of 'nb-checkbox'.
1. If 'nb-checkbox' is an Angular component and it has 'ngModelOptions' input, then verify that it is part of this module.
2. If 'nb-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
64 formControlName="isAgree" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}"></nb-checkbox>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/file.component.ts:14:16
14 templateUrl: './file.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component CeidgPositiveComponent.
src/app/file.component.html:94:121 - error NG8002: Can't bind to 'checked' since it isn't a known property of 'nb-checkbox'.
1. If 'nb-checkbox' is an Angular component and it has 'checked' input, then verify that it is part of this module.
2. If 'nb-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
94 <nb-checkbox name="groupname" value={{statement.description}} label={{statement.description}} [checked]="myVar2" (change)="myVar2 = !myVar2"></nb-checkbox>
~~~~~~~~~~~~~~~~~~
src/app/file.component.ts:14:16
14 templateUrl: './file.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component File.
我已经import {FormsModule, ReactiveFormsModule} from '@ angular / forms'; import {NgxsModule} from '@ ngxs / store';
导入了模块import {FormsModule, ReactiveFormsModule} from '@ angular / forms'; import {NgxsModule} from '@ ngxs / store';
import {FormsModule, ReactiveFormsModule} from '@ angular / forms'; import {NgxsModule} from '@ ngxs / store';
有谁知道如何解决这个问题?
根据我们在评论中的讨论更新我的答案,以选中/取消选中所有复选框。
组件.ts
checklist
checkUncheckAll(evt) {
this.checklist.forEach((c) => c.isSelected = evt.target.checked)
}
ngOnInit() {
this.checklist = [
{id:1,value:'Elenor Anderson',isSelected:false},
{id:2,value:'Caden Kunze',isSelected:false},
{id:3,value:'Ms. Hortense Zulauf',isSelected:false},
{id:4,value:'Grady Reichert',isSelected:false},
{id:5,value:'Dejon Olson',isSelected:false},
{id:6,value:'Jamir Pfannerstill',isSelected:false},
{id:7,value:'Aracely Renner DVM',isSelected:false},
{id:8,value:'Genoveva Luettgen',isSelected:false}
];
}
在您的模板中
<div class="container">
<div class="text-center mt-5">
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<input type="checkbox" name="list_name" value="m1" (change)="checkUncheckAll($event)"/> <strong>Select/ Unselect All</strong>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of checklist">
<input type="checkbox" [checked]="item.isSelected" name="list_name" value="{{item.id}}"/>
{{item.value}}
</li>
</ul>
</div>
</div>
</div>
</div>
工作演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.