html - 如何在Angular 8中获取多个复选框的值
问题描述
我正在尝试获取所选复选框的值。我有以下代码:
<div style="background-color:lightblue;" >
<div class="content">
<label class="label">Province</label>
<div class="form-check form-check-inline" *ngFor = "let province of utilities.Provinces; let i of index">
<label class="form-check-label" for="inlineCheckbox1" >{{province}}</label>
<input class="form-check-input" [formControl]= "province" (change)="getSelectedProvinces()" type="checkbox" id="inlineCheckbox{{i}}" value="option1">
</div>
</div>
在 .ts 我有以下
import { Component, OnInit } from '@angular/core';
import { UtilitiesService } from '../_services/utilities.service';
import { Utilities } from '../models/utilities';
import { forEach } from '@angular/router/src/utils/collection';
@Component({
selector: 'app-filtering',
templateUrl: './filtering.component.html',
styleUrls: ['./filtering.component.css']
})
export class FilteringComponent implements OnInit {
utilities: Utilities;
provinces: string[] = [];
selectedProvinces: string[] = [];
selectedCategories: string[] = [];
constructor(private utilityService: UtilitiesService) { }
ngOnInit() {
this.loadUtilities();
}
loadUtilities() {
this.utilityService.getJSON().subscribe((utilities: Utilities) => {
this.utilities = utilities;
});
for (const province of this.utilities.Provinces) {
this.provinces.push(province);
}
}
getSelectedProvinces() {
this.selectedProvinces = [];
this.utilities.Provinces.forEach((_province, i) => {
if (_province.value) {
this.selectedProvinces.push(this.provinces[i]);
}
});
console.log(this.selectedProvinces);
}
}
在我的utilities.ts
我有以下内容:
export interface Utilities {
Provinces: Array<string>;
}
我的服务是这样写的:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Utilities } from '../models/utilities';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UtilitiesService {
constructor(private http: HttpClient) {}
public getJSON(): Observable<Utilities> {
return this.http.get<Utilities>('./assets/utilities.json');
}
}
即具有以下内容的 Json:
{
"Provinces":["East","North West","North"]
}
当我尝试这样做时,出现以下错误:
TypeError: Cannot read property 'Provinces' of undefined.
问题是,当我删除[formControl]= "province" (change)="getSelectedProvinces()"
时,至少我可以在我的页面上显示省份。
我该怎么办?
解决方案
我终于使用下面的代码解决了我的问题:
<div class="content">
<label class="label">Province</label>
<div class="form-check form-check-inline" *ngFor="let province of utilities.Provinces">
<label class="form-check-label" for="{{province}}">{{province}}</label>
<input class="form-check-input" (change)="onChangeCategory(province, $event.target.checked)"name="{{ province}}" type="checkbox" id="{{province}}">
</div>
在我的.ts
中,我有以下内容:
onChangeProvince(province: string, isChecked: boolean) {
if (isChecked) {
this.selectedProvinces.push(province);
} else {
const index = this.selectedProvinces.indexOf(province);
this.selectedProvinces.splice(index, 1);
}
console.log(this.selectedProvinces);
}
推荐阅读
- python - 可以获得 Python 的 StringIO 的文件描述符吗?
- spring - 如何从 Spring MVC 控制器访问 JSP 中请求范围内的变量?
- python - 在 MySQL 上部署的 Django 出现 #1071 错误“指定的密钥太长”
- c - 使用指针点更改结构字段时出现指针错误
- r - R:带有双 Y 轴的绘图?
- javascript - 将 jQuery 转换为纯 JavaScript
- c# - 在形状上使用 LINQ
- java - Intellij Idea 有时不会按照应有的方式构建应用程序
- javascript - 如何在 SAPUI5 中更改 sap.m.Table 的字体大小?
- sql - Informatica SQL 转换中的联接查询失败