我是一个相当新的角度工作,并想知道是否有一个简单的方法来首先检查是否选中了复选框。如果选中它,我想将它传递给saveOptions函数。如果选择了多个,我想将它们全部传递并保存到一组选项中。有人可以帮我吗?提前致谢!
import { Component } from '@angular/core';
import { forEach } from '@angular/router/src/utils/collection';
import { Options } from 'selenium-webdriver/ie';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
options: any = []
saveOptions(x:any[]){
x.forEach(element => {
this.options.push(element);
});
}
}
<ul class="option-row">
<div class="option-group">
<li><input type="checkbox" id="option-1" value="1" required> <label for="option-1">Option 1</label></li>
<li><input type="checkbox" id="option-2" value="2" required> <label for="option-2">Option 2</label></li>
<li><input type="checkbox" id="option-3" value="3" required> <label for="option-3">Option 3</label></li>
</div>
<!--Want to know how to check if the checkbox is selected and pass the selected options to the method-->
<button type="button" (click)="saveOptions();">Submit</button>
</ul>
一种方法是订阅表单的valueChanges,如下所示:
export class AppComponent implements OnInit {
options: any = []
model = { optionOne: false, optionTwo: false, optionThree: false }
formChangesSubscription;
@ViewChild('form') ngForm: NgForm;
ngOnInit() {
this.formChangesSubscription = this.ngForm.form.valueChanges.subscribe(x => {
console.log(x);
})
}
saveOptions(x: any[]) {
x.forEach(element => {
this.options.push(element);
});
}
}
<form #form="ngForm">
<ul class="option-row">
<div class="option-group">
<li><input type="checkbox" [(ngModel)]="model.optionOne" name="optionOne" id="option-1" value="1" required> <label for="option-1">Option 1</label></li>
<li><input type="checkbox" [(ngModel)]="model.optionTwo" name="optionTwo" id="option-2" value="2" required> <label for="option-2">Option 2</label></li>
<li><input type="checkbox" [(ngModel)]="model.optionThree" name="optionThree" id="option-3" value="3" required> <label for="option-3">Option 3</label></li>
</div>
<!--Want to know how to check if the checkbox is selected and pass the selected options to the method-->
<button type="button" (click)="saveOptions();">Submit</button>
</ul>
</form>
https://stackblitz.com/edit/angular-j5idkn?file=src%2Fapp%2Fapp.component.ts
我只想在这里扩展ganesh的答案!
Component.html
<form #form="ngForm">
<ul class="option-row">
<div *ngFor="let li of listedValue; index as i" class="option-group">
<li><input type="checkbox" id="option-{{li}}" [value]="l" required (click)="setCheckbox(li, i)"> <label for="option-{{li}}">Option {{ i }}</label></li>
</div>
button type="button" (click)="saveOptions();">Submit</button>
</ul>
</form>
component.ts
name = 'Angular 5';
listedValue: any = [0, 1, 2];
options: any = []
ngOnInit(){}
setCheckbox(event: any, index: number) {
if(!this.options.includes(event)){
this.options = [...this.options, event];
}else {
this.options = this.options.filter((item) => item !== event);
}
}
saveOptions() {
console.log(this.options);
}
你可以在ngFor
和[value]
div
元素的帮助下以动态方式进行。
使用数组为您的li
元素,修改您的模板和组件如下所示。
Component.html
<ul class="option-row">
<div *ngFor="let li of listedValue" class="option-group">
<li><input type="checkbox" id="option-{{li}}" [value]="l" required (click)="setCheckbox(li)"> <label for="option-{{li}}">Option 1</label></li>
</div>
<!--Want to know how to check if the checkbox is selected and pass the selected options to the method-->
<button type="button" (click)="saveOptions();">Submit</button>
</ul>
Component.ts
name = 'Angular 5';
listedValue: any = [1, 2, 3];
options: any = []
setCheckbox(event: any,value: any) {
if (event.target.checked)
this.options.push(value)
else
this.options= this.options.filter(val => val != value);
}
saveOptions() {
console.log(this.options);
}
我为你的案子创建了一个stackblitz检查一次。我希望这能解决你的问题:)
我认为你可以使用表格控制反应形式,它会帮助你