html - 当我想要多个值时,角度复选框仅选择一个值数据
问题描述
大家好,我目前正在研究一个angular tickbox
我想勾选多个值的项目。但是对于我来说,当我单击英语框时,它会显示有关英语的所有数据,但是当我勾选另一个复选框时,它只显示最新框的值德语而不是英语和德语一起。如何在主页图表上填充两个复选框数据。
TS代码
public onChangeLearnPrograms(event: any): void {
if (event.source.selected) {
this.homePageFilter.learn_Programs= event.source.value;
this.generateCharts();
}
}
html代码
<mat-form-field class="lg-filter-input-width">
<mat-select placeholder = "learningprograms" formControlName="learn_Programs"multiple>
<mat-option type="checkbox" (onSelectionChange)="onChangeLearnPrograms($event)"
*ngFor="let control of LearnPrograms | fieldFilter : 'learn_Programs' : filterFormGroup.value.learn_Programs"
[value]="control.learn_Programs" > {{control.learn_Programs}} </mat-option>
</mat-select>
</mat-form-field>
</form>
</mat-panel-description>
解决方案
该复选框发出它已被选中但不知道任何其他选中的复选框。Therefore you currently overwrite the first value when a new checkbox is selected.
您应该是learn_Programs
一个数组并在事件触发时删除/添加,onChangeLearnPrograms
或者每当调用该函数时,遍历复选框以获取选中的复选框。
推荐阅读
- java - 列表对象的 Thymeleaf 显示字段
- typescript - 使用解构对象和扩展运算符创建的类型对象
- typescript - 如何在打字稿中声明一个包含字符串数组的数组
- angular-material - 如何使用 Angular Material 创建粘性页脚和页眉
- android - “pm install”命令对 Android 无效
- kotlin - Kotlin 错误类型推断导致重载解析模糊
- java - 使用 ITextRenderer 没有进入 pdf 的中文单词
- typescript - 复杂类型推断。很确定这在 TS 中是可能的,但是
- git - 取消忽略子目录不显示未跟踪的文件
- android - Firebase 更新节点同步