Ionic切换ion-segment报Cannot read properties of undefined错误

错误根因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'detail')报错核心有两个问题：

1. 模板中ion-segment绑定的事件类型错误，且调用onFilterUpdate时没有传递事件参数，导致函数入参event为undefined，读取event.detail时直接抛出异常
2. ion-segment初始配置值和绑定变量的初始值不一致，会额外引发切换逻辑匹配异常

第一步：修改Discover.page.html中的ion-segment配置 #

将原ion-segment代码替换为如下内容：

<ion-segment value="viewArtist" [(ngModel)]="switchSegment" (ionChange)="onFilterUpdate($event)">
  <ion-segment-button value="viewArtist">Artist</ion-segment-button>
  <ion-segment-button value="viewVenue">Venue</ion-segment-button>
</ion-segment>

修改点：

• 把错误的click事件替换为ion-segment官方标准的ionChange事件，只有切换选项时才会触发回调
• 给onFilterUpdate传递事件参数$event
• 把初始value="artist"改为和后续赋值一致的value="viewArtist"，避免初始加载时的匹配异常

第二步：修正Discover.page.ts中的onFilterUpdate逻辑 #

你当前的逻辑会重复裁剪数组导致首条数据丢失，按你的实际需求选择对应代码替换原有onFilterUpdate即可：

版本1：不需要过滤当前用户自身发布的数据

onFilterUpdate(event: CustomEvent<SegmentChangeEventDetail>) {
  const targetValue = event.detail.value;
  if (targetValue === 'viewArtist') {
    this.relevantArtist = this.loadedArtist;
  }
  if(targetValue === 'viewVenue') {
    this.relevantVenue = this.loadedVenue;
  }
}

版本2：需要过滤当前用户自身发布的数据

onFilterUpdate(event: CustomEvent<SegmentChangeEventDetail>) {
  const targetValue = event.detail.value;
  if (targetValue === 'viewArtist') {
    this.relevantArtist = this.loadedArtist.filter(
      artist => artist.userId !== this.authService.userId
    );
  }
  if(targetValue === 'viewVenue') {
    this.relevantVenue = this.loadedVenue.filter(
      venue => venue.userId !== this.authService.userId
    );
  }
}

修改点：

• 避免重复对数组执行slice(1)，导致首条数据永久丢失
• 逻辑简化，切换到对应分类才处理对应分类的展示数据，减少无效执行

第三步（可选）：添加空数组兜底避免偶发报错 #

将ts中数组声明的代码改为初始赋值空数组，避免数据加载完成前读取length属性报错：

loadedArtist: Artist[] = [];
loadedVenue: Venue[] = [];
relevantArtist: Artist[] = [];
relevantVenue: Venue[] = [];

内容的提问来源于stack exchange，提问作者mcadam4000