Ionic 3 如何 select 特定的离子芯片点击事件？

Question

我有一堆由 ngFor 循环生成的离子芯片。我使用 tagDefaultColor 变量添加了 select 所有离子芯片功能。现在，当我想要 select 单个离子芯片时，它 select 全部。

我想要实现的是能够通过点击事件将所有按钮切换到 select 每个 ion-chip 或 select 它们一个接一个。一旦 ion-chip 被 select 编辑，它会将其颜色更改为主要颜色。提前谢谢你。

constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.information = navParams.data.data;
    this.children = [{ id: 1, name: 'Ginny Weasley' }, { id: 2, name: 'Harry Potter' }, { id: 3, name: 'Ronald Weasley' }, { id: 4, name: 'Luna Lovegood' }];
    this.selectButtonText = 'SELECT ALL';
    //this.tagSelectedColor = "primary";
    this.tagDefaultColor = "secondary";
    this.quantity = 0.0;
    this.shareWithFamily = true;
  }

selectAll() {
    if (this.selectButtonText === 'SELECT ALL') {
      this.selectButtonText = 'UNSELECT ALL'
      this.tagDefaultColor = "primary";
    } else {
      this.selectButtonText = 'SELECT ALL'
      this.tagDefaultColor = "secondary"
    }
  }

changeTagColor(event) {
    console.log(event.target);
    if (this.tagDefaultColor === "secondary") {
      this.tagDefaultColor = "primary"
    } else {
      this.tagDefaultColor = "secondary"
      event.target.setAttribute('color', 'secondary')
    }
  }

HTML部分

<ion-item no-lines>
      <ion-row>
        <ion-col style="display: flex;align-items: center; justify-content: center">
          <strong>Tag Students</strong>
          <button ion-button full color="primary" class="select-all-btn" (click)="selectAll()">{{selectButtonText}}
          </button>
        </ion-col>
      </ion-row>
    </ion-item>

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

Answer 1

你所有的筹码都绑定到相同的属性所以如果你改变它们都会改变。相反，您应该使用数组单独分配它们，如下所示：

<ion-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>

changeTagColor(i:number) {
    console.log(event.target);
    if (this.tagDefaultColor[i] === "secondary") {
      this.tagDefaultColor[i] = "primary"
    } else {
      this.tagDefaultColor[i] = "secondary"
      // event.target.setAttribute('color', 'secondary') this is redundant
    }
  }

编辑： 由于 ionic 不会导出组件，因此您不能使用模板引用直接更改组件的颜色。

正如您在评论中所问，有一种简单的方法来填充颜色数组，如下所示：

  tagDefaultColor = Array(this.children.length).fill("secondary");

Here 是 Stackblitz 示例。

Ionic 3 如何 select 特定的离子芯片点击事件？

Ionic 3 How to select specific ion-chip on click event?

ionic3

angular