Ionic 3 添加/删除标签

Question

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

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

我想要实现的是能够：

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)
    }
  }

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

Answer 1

您传递给函数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)
     }
}

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