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

Question

这是控制台日志

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

Answer 1

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

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

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

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

您可以在代码中更改的内容：

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

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

ionChange event firing twice with dynamic ion-segment

ionic-framework

angular

ionic4