使用动态离子段触发两次 ionChange 事件答案

【问题标题】：ionChange event firing twice with dynamic ion-segment使用动态离子段触发两次 ionChange 事件
【发布时间】：2020-10-06 17:31:20
【问题描述】：

这是控制台日志

Console log

它使用静态离子变化段触发一次，但使用动态触发两次，这是我的代码，以便您更好地理解它。

<ion-segment *ngIf='!isLoading' scrollable="true" value="all" (ionChange)="segmentChanged($event)" style="place-content: center;">
  <ion-segment-button value="all">
    <ion-label>All</ion-label>
  </ion-segment-button>
  <ion-segment-button [value]="c.payload.doc.data().name" *ngFor="let c of categorys">
    <ion-label>{{ c.payload.doc.data().name }}</ion-label>
  </ion-segment-button>
</ion-segment>

段更改代码

 segmentChanged(ev: any) {
    if (ev.detail.value === 'all') {
      this.feedSub = this.feedService.getAll().subscribe(results => {
        this.allposts = results.sort((a, b) => a.dateCreated <= b.dateCreated ? 1 : -1);
        console.log(ev.detail.value);
      });
    }else {
      this.feedSub = this.feedService.getAll().subscribe(results => {
        this.allposts = results.sort((a, b) => a.dateCreated <= b.dateCreated ? 1 : -1);
      });
      this.allposts = this.allposts.filter((post) => {
        console.log(ev.detail.value);
         // console.log(post.category.name.match(ev.detail.value));
        return post.category.name.match(ev.detail.value);
      });
    }
  }

【问题讨论】：

我在 stackblitz 上测试了你的代码，它只触发了一次 ionChange（无论是选择静态按钮还是ngFor 生成的按钮之一）。见这里：stackblitz.com/edit/ionic-nvt4ts?file=pages/home/home.ts
您可以自己制作 stackblitz 以便我们看到问题的发生吗？
现在我又添加了两个项目，我把它触发了 4 次，（上次我的提要页面上只有 2 个项目，这就是为什么它只触发了 2 次，我想这是关于如何我正在从 Firestore 中获取数据）我会再次检查，顺便说一句，谢谢您的时间。
我想不通，它会在我的提要上有多少帖子时触发。
你可以编辑你的帖子并包含segmentChanged()函数的代码吗？

标签： angular ionic-framework ionic4

【解决方案1】：

您的代码可能按预期工作，即ionChange 只触发一次。

您在控制台中看到的几条消息是由过滤器函数内部的console.log 引起的：

this.allposts = this.allposts.filter((post) => {
  console.log(ev.detail.value);
  return post.category.name.match(ev.detail.value);
});

当您调用过滤器并提供一个函数时，该函数将为allposts 中的每个帖子执行一次。这就是为什么消息在控制台中输出 n 次的原因，即 n 的帖子总数。

您可以对代码进行哪些更改：

1 - 将console.log(ev.detail.value); 放在segmentChange 函数的顶部（而不是在过滤器内）。

2 - 与您的问题无关，但建议仅在触发订阅并设置this.allposts 值后调用filter：

this.feedSub = this.feedService.getAll().subscribe(results => {
    this.allposts = results.sort((a, b) => a.dateCreated <= b.dateCreated ? 1 : -1);

    this.allposts = this.allposts.filter((post) => {
      return post.category.name.match(ev.detail.value);
    });
});

【讨论】：