时间戳

首页 > 解决方案 > Ionic 3 添加/删除标签

angular - Ionic 3 添加/删除标签

问题描述

嘿，正在全选或选择一项功能。

现在您可以使用全选/取消全选按钮，或者通过单击添加一个标签来选中它。一旦有人取消选择单个标签，我就会坚持删除标签和孩子。谢谢你的任何建议。

我想要实现的是能够：

  1. 使用“全选”按钮选择所有标签，切换它们的颜色，并将所有子名称添加到数组中，
  2. 使用“取消全选”取消选择所有标签，切换它们的颜色，并从数组中删除所有子名称，
  3. 通过单击选择一个或多个标签，以更改颜色并添加到数组中，
  4. 通过单击取消选择一个或多个标签，将颜色更改为辅助颜色并将它们从数组中删除。

我用来从数组中选择/取消选择单个项目的函数

<div class="students-tags">
     <ion-chip #chip [id]="child.id" [color]="tagDefaultColor[i]" (click)="changeTagColor(i)"
        *ngFor="let child of children; let i = index">
     <ion-label>{{child. name}}</ion-label>
   </ion-chip>
</div>


changeTagColor(i) {
    if (this.tagDefaultColor[i] === "secondary") {
      this.tagDefaultColor[i] = "primary";
      this.selectedChildren.push(this.children[i]);
      console.log('After adding child: ', this.selectedChildren)
    } else {
      this.tagDefaultColor[i] = "secondary";
      this.selectedChildren.splice(i, 1);
      console.log('After removing child: ', this.selectedChildren)
    }
  }

页面/home/home.ts 上的 Stackblitz 链接：https ://stackblitz.com/edit/ionic-zzcptz

标签： angularionic3

解决方案

您传递给函数的索引changeTagColor是错误的。

像这样检查索引。

changeTagColor(i) {
     if (this.tagDefaultColor[i] === "secondary") {
         this.tagDefaultColor[i] = "primary";
         this.selectedChildren.push(this.children[i]);
         console.log('After adding child: ', this.selectedChildren)
     } else {
         this.tagDefaultColor[i] = "secondary";
         this.selectedChildren.splice(i, 1);
         console.log('i: ', i)
         console.log('After removing child: ', this.selectedChildren)
     }
}

此外，请务必小心您的对象是深拷贝还是浅拷贝。

推荐阅读