Angular+Ionic项目调用relevantArtist.name提示标识符未定义错误问询

问题根因 #

你在tab4.page.ts中将relevantArtist定义为Artist[]数组类型，但在模板里直接用relevantArtist.name访问属性，数组本身没有name成员，因此触发类型报错。你用filter筛选匹配用户的artist数据时，filter方法返回的是数组，你需要取匹配到的单个对象而非直接使用数组。

修复步骤 #

• 修改relevantArtist的类型定义，从数组改为单个Artist对象，添加可选标识避免空值报错

// tab4.page.ts 原代码
relevantArtist: Artist[];
// 修改后
relevantArtist?: Artist;

• 修改数据筛选逻辑，用find替代filter直接返回单个匹配对象

// tab4.page.ts 原代码
this.relevantArtist = this.loadedArtist.filter(
  artist => artist.userId === userId
);
// 修改后
this.relevantArtist = this.loadedArtist.find(
  artist => artist.userId === userId
);

• 模板中添加可选链判断，避免数据未加载完成时报空值错误

<!-- tab4.page.html 原代码 -->
<ion-title>{{ isLoading ? 'Loading...' : relevantArtist.name }}</ion-title>
<!-- 修改后 -->
<ion-title>{{ isLoading ? 'Loading...' : relevantArtist?.name }}</ion-title>

额外注意 #

你当前逻辑里的this.loadedArtist = this.relevantArtist.slice(1)会删除原艺术家列表的第一个元素，如果当前用户对应的艺术家刚好是列表第一条数据，会出现匹配不到的情况，如果不是业务需要可以删除这行冗余代码。

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