- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在处理一个元素列表并使用管道过滤列表,过滤器是多选的,可以使用多个值进行过滤,我将过滤器保存在本地存储中,以便在关闭窗口后保留在过滤器中或重新加载页面,在 mat-checkbox
组件中,我在 [checked]="existInArray(color.id, filterColor)"
指令中使用 i 函数来检查复选框如果该值已经在过滤器数组中以选中复选框,但我有一个问题,如果使用该函数选中复选框,下次我单击复选框以取消选中它时,复选框不会更改 的状态checked true to false
,只有当我第二次点击时才更改为checked false
模板
<mat-checkbox *ngFor="let color of filterService.getFilter(filterType.FILTER_COLOR).items.ToArray() | filterQuery:filterOptions.color"
[checked]="existInArray(color.id, filterColor)" class="filter-checkbox" [value]="color.id" [hidden]="color.id === '999999'"
(click)="filterBy(filterType.FILTER_COLOR, color.id, filterColor)">
<div class="assigned">
<div class="assigned-avatar text-center" [ngStyle]="{ 'background-color': color?.color?.bgColor }"></div>
<p class="assigned-name">{{ color.name }}</p>
</div>
</mat-checkbox>
Filter.ts
public existInArray(element, array: Array<string>): boolean {
return array.indexOf(element) > -1;
}
public filterBy(filterType: FilterTypeEnum, element: any, array: Array<string>) {
this.toggleInArray(element, array);
this.updateFilterObservable(filterType);
}
例如,正如您在图像中看到的那样,默认情况下复选框已经被选中,因为我使用 existInArray
函数来检查过滤器数组中是否已经存在检查值,如果我尝试取消选中它,第一次不起作用,但是当我第二次单击时复选框未选中,知道会是什么......?
我认为原因是因为 [checked]
在我从数组中切换元素之前被触发,但到目前为止不知道如何解决......任何想法。
最佳答案
这是您的 [checked]="existInArray(color.id)"
与您的点击事件不同步的时间问题.... [checked]="existInArray (color.id)"
在您点击之前发生。改为订阅 change
事件。
(change)="toggleInArray(color.id)"
关于javascript - Angular Material Checkbox 不会改变选中的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53706667/
在检查复选框时我发现有写 CheckBox checkbox = (CheckBox)sender 在 checkBox1_CheckedChanged 事件上。 请解释一下这是什么意思? 最佳答案
我正在使用来自命名空间 System.Windows.Forms 的 ToolTip 类编辑我的 Web 应用程序;我的代码中有几个复选框,因此显示此错误: 'CheckBox' is an ambi
我正在制作 Bootstrap 复选框下拉菜单,选项包含在 中。处理点击的标签,但我也有一个 在 a 标签内。 当用户按下实际复选框而不是仅按下 时,就会出现我的问题。元素。两者都被点击并且发生了
TLDR:使用defaultChecked而不是checked,工作jsbin . 尝试设置一个简单的复选框,在选中时会划掉其标签文本。由于某种原因,当我使用该组件时,handleChange 没有被
我想拥有它,所以如果复选框为 NULL 或 0,则它不像值为 1 时那样喜欢。另外,有没有办法将选中的框限制为 10 个? 当前代码: if(isset($_POST['submit'])){//to
如果我选中一个复选框,下拉列表应该只显示在该复选框旁边,但它会显示在它下面的所有其他复选框中。 这是我在 html 代码中使用的 css .sub-nav { display: none; } inp
我在警报对话框中有一个带有复选框的数据表,当我单击该复选框时,它没有选中(选中=选中)该框。我跟着这个video 这是我的尝试 import 'package:flutter/material.dar
如果单独使用,以下代码效果很好, Angular6.0 不允许 [(ngModel)] 与 FormGroup (Reactive Forms)。 As 在 angular 6.0 中已弃用,并将在
那么我应该使用哪个来选择元素?我仅使用复选框作为示例,这个问题涉及所有表单元素。 实际上,当我们这样做时,哪个更快: li:first 或 li:eq(0) ? 最佳答案 来自the document
问题 : 我有一个列表框,其中列表框是复选框。在第一次单击时,复选框被选中并选中。在第二次单击时,仅设置复选框。可以使用箭头键重新选择不同的复选框。我的目标是,首先选中该复选框,然后再检查(再次单击它
我似乎无法弄清楚如何让复选框和相关文本出现在一行上。文本很短,所以它似乎不是宽度问题。 我尝试在控件上设置 display:inline,但是当它呈现时,在输入和标签周围添加了一个跨度,并且具有 di
创建带有复选框列的 Table 非常容易,例如,使用 SWT.CHECK 标志。但是如何使某些表格行中的复选框不可编辑而其他行中的复选框保持可编辑? 最佳答案 我不知道这样做的简单方法。 但我看到了两
是否可以使用 TogglerBar 而不是 2 个复选框来显示或不显示不同的形状。 TogglerBar 的每个按钮中都写有绿色和红色? Manipulate[ Graphics[{If[thePin
我需要更改 Windows Phone 8 中 LongListMultiSelector 的复选框的颜色,因为我的背景是白色,这可能吗? 谢谢。 最佳答案 为此,您必须首先通过在 visual st
我有一个带有插件 Slick.CheckboxSelectColumn 的网格。 是否可以在没有 Jquery 的情况下隐藏某些行中的复选框?我想可以使用 Formatter。 这是带有 slickg
所以我有这个... 在这里,id 是有道理的值在引号中,因为它是一个字符串标识符。但是type呢?值(value)?不是 checkbox一种类型,例如 String 和 Boolean?为什么我总
问题: 如果用户选中了复选框,我将尝试验证下拉列表,如您在屏幕一中所见。 问题: 那么,如果用户选择了标题中的所有复选框,我该如何验证复选框呢?如您所见,屏幕二。如果我选中所有复选框,那么我希望启动验
我知道它有点重复,我正在尝试以不同的方式做到这一点,从而重新发布这个问题。 我想要实现的是,当有人“取消选中”OSPF 复选框时..被动接口(interface)检查也应该自动“取消选中”。我正在尝试
这是代码(是的,我使用的是基本的 reset.css): .checkbox { border: 1px solid black; width: 10px; height: 10px; }
我正在尝试显示多组带有标题复选框的复选框,如下图所示。 从数据库中我得到这样的数据, CODE SUBCODE DESCR DESCR
我是一名优秀的程序员,十分优秀!