在Angular 8中管理复选框状态的正确方法是什么?

迷你型

我有两个清单,调味品和果汁。

flavors = ['Apple', 'Orange', 'Banana', 'Cherry'];
juice = [];

我正在使用复选框来调用一种更新我的果汁列表中的风味的方法。

<mat-slide-toggle (change)="updateJuice(flavor)">Add</mat-slide-toggle>

我包括一个图标,用于从果汁列表中删除使用相同方法的风味。

<i class="fas fa-backspace clickable" (click)="updateJuice(flavor)"></i>

我不确定当有人将其从果汁中移除时,如何最好地管理静态风味列表中的复选框状态。谁能给我一些建议/例子?

我希望能够使用ngModel来检查口味列表,如下所示:

<mat-slide-toggle (change)="updateJuice(flavor)" [(ngModel)]="juice.indeOf(flavor) > -1">Add</mat-slide-toggle>

但是,编译器不喜欢这种想法。

我制作了一个StackBlitz,它显示了一个有效的示例。

https://stackblitz.com/edit/list-handler?file=src/app/app.component.html

我希望能够做到这一点,以便当有人单击将其从果汁列表中删除的图标时,风味列表中的复选框变为未选中状态。有没有简单的方法可以做到这一点?

朱利叶斯·齐兹维维尤斯

在这种情况下,您想使用对象来控制状态。它更容易,您无需使用循环,您可以通过其键立即获得Object值。由于Angular具有keyvalue管道,因此变得更加容易:

flavors = [
  'Apple', 
  'Orange',
  'Banana', 
  'Cherry'
];
juice = {};

updateJuice(key, event) {
  if (event.checked) {
    this.juice = {...this.juice, [key]: key }
  } else {
    delete this.juice[key];
  }
}

现在,您还可以将juiceObject绑定到的状态MatSlideToggle,这样,当从juiceObject中删除项目时,它就会滑落

Pick flavors for your juice:
<ul>
  <li *ngFor="let flavor of flavors"> 
    {{flavor}} <mat-slide-toggle [checked]="!!juice[flavor]" (change)="updateJuice(flavor, $event)">Add</mat-slide-toggle>
  </li>
</ul>

Flavors in juice:
<ul>
  <li *ngFor="let flavor of juice | keyvalue"> 
    {{flavor.key}} <i class="fas fa-backspace clickable" (click)="updateJuice(flavor.key, $event)"></i>
  </li>
</ul>

分叉演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular 10中复选框已选中状态

来自分类Dev

angular js中的复选框功能

来自分类Dev

图像作为Angular中的复选框

来自分类Dev

Angular中的多个复选框

来自分类Dev

Angular 中的复选框对象

来自分类Dev

如何在复选框Angular 8的复选框中以逗号分隔的字符串连接值

来自分类Dev

检测Angular.js ng-change事件中的复选框是否处于选中状态

来自分类Dev

在ngFor Angular 2中的输入类型复选框上设置检查状态

来自分类Dev

在ngFor Angular 2中的输入类型复选框上设置检查状态

来自分类Dev

Angular2:如何在FormGroup中实例化复选框的状态?

来自分类Dev

与 Angular 5 中的子组件内的 @Input 绑定时,复选框的选中状态不会更新

来自分类Dev

Angular 2 - 复选框列表 - 如何检查复选框的状态

来自分类Dev

Angular没有给出复选框的当前状态

来自分类Dev

Angular JS,过滤时请记住复选框状态

来自分类Dev

在Angular复选框状态下禁用/启用按钮

来自分类Dev

Angular patchValue() 复选框

来自分类Dev

将多个条件应用于Angular 8应用中的复选框时发生

来自分类Dev

Angular 8反应形式:不可单击复选框

来自分类Dev

Angular8复选框布尔过滤器

来自分类Dev

Angular8复选框布尔过滤器

来自分类Dev

在 Angular 8 中使用动态表单创建复选框

来自分类Dev

在Angular8中检测多个ajax请求状态的最佳专业方法是什么?

来自分类Dev

提交时处理Angular中多个复选框的最佳方法

来自分类Dev

如何计算Angular中的选定复选框?

来自分类常见问题

检查ANGULAR 10中是否已选中复选框

来自分类Dev

附加到Angular.js中的模型的复选框

来自分类Dev

在Angular 2中使用管道过滤复选框

来自分类Dev

如何取消选中angular2中的复选框

来自分类Dev

Angular2中的复选框未触发事件

Related 相关文章

  1. 1

    Angular 10中复选框已选中状态

  2. 2

    angular js中的复选框功能

  3. 3

    图像作为Angular中的复选框

  4. 4

    Angular中的多个复选框

  5. 5

    Angular 中的复选框对象

  6. 6

    如何在复选框Angular 8的复选框中以逗号分隔的字符串连接值

  7. 7

    检测Angular.js ng-change事件中的复选框是否处于选中状态

  8. 8

    在ngFor Angular 2中的输入类型复选框上设置检查状态

  9. 9

    在ngFor Angular 2中的输入类型复选框上设置检查状态

  10. 10

    Angular2:如何在FormGroup中实例化复选框的状态?

  11. 11

    与 Angular 5 中的子组件内的 @Input 绑定时,复选框的选中状态不会更新

  12. 12

    Angular 2 - 复选框列表 - 如何检查复选框的状态

  13. 13

    Angular没有给出复选框的当前状态

  14. 14

    Angular JS,过滤时请记住复选框状态

  15. 15

    在Angular复选框状态下禁用/启用按钮

  16. 16

    Angular patchValue() 复选框

  17. 17

    将多个条件应用于Angular 8应用中的复选框时发生

  18. 18

    Angular 8反应形式:不可单击复选框

  19. 19

    Angular8复选框布尔过滤器

  20. 20

    Angular8复选框布尔过滤器

  21. 21

    在 Angular 8 中使用动态表单创建复选框

  22. 22

    在Angular8中检测多个ajax请求状态的最佳专业方法是什么?

  23. 23

    提交时处理Angular中多个复选框的最佳方法

  24. 24

    如何计算Angular中的选定复选框?

  25. 25

    检查ANGULAR 10中是否已选中复选框

  26. 26

    附加到Angular.js中的模型的复选框

  27. 27

    在Angular 2中使用管道过滤复选框

  28. 28

    如何取消选中angular2中的复选框

  29. 29

    Angular2中的复选框未触发事件

热门标签

归档