Question

所以我有一个使用* ngFor属性迭代并填充表的div。在循环上，我使用它的数据值分配div的背景色。如下所示：

<div class="col-xs-1-10" *ngFor="let item of combinations">
<div [style.background-color]="item.colorCode" [style.pointerEvents]="(item.slotStatus == 'CLOSED') ? 'none' : 'auto'" (click)="selectItem(item)">
  <span>{{item.slotStatus}}</span>
</div>

我可以验证初始加载是否正常，而且所选项目上的第一次单击事件确实在更改DIV背景色+也可以按预期更新项目参数。但是，在下次单击时，不起作用的背景色不会更改，项参数也不会更新。请参阅我的selectItem方法代码：

selectItem(item: any) {

console.log(item);

if (item.colorCode = '#CA3433') {
  item.colorCode = '#3342FF';
}
else if (item.colorCode = '#3342FF') {
  item.colorCode = '#CA3433';
}

console.log(item);

}

简而言之，我需要的是 1.选择/取消选择项目并更新列表（也许可以从中建立会话存储） 2.在选择/取消选择项目时，将div的颜色编码更改为指示器，以供用户使用

Answer 1

将selectItem更新为此（=是刺客运算符，而==或===是相等运算符）

selectItem(item: any) {

console.log(item);

if (item.colorCode == '#CA3433') {
  item.colorCode = '#3342FF';
}
else if (item.colorCode == '#3342FF') {
  item.colorCode = '#CA3433';
}

console.log(item);
}

像这样检查以获取有关比较Comparison Operators的更多信息

javascript-double-equals-vs-triple-equals

Answer 2

您在if语句中使用单个=，这不是比较值的方式。

固定代码

if (item.colorCode == '#CA3433') {
  item.colorCode = '#3342FF';
}
else if (item.colorCode == '#3342FF') {
  item.colorCode = '#CA3433';
}

如果要比较值而不用担心它们的类型，请使用==，如果要确保两个值是同一类型，请使用===。

示例

('123' == 123) // returns true
('123' === 123) // returns false
('123' === '123') // returns true

Angular：更新模型不适用于连续单击事件

2 个答案:

固定代码

示例