打字稿：处理来自服务的数据

Question

我想显示用户的数据，但我无法显示正确的个人资料图片。如果用户没有个人资料图片，我会在控制台中看到“未定义”。如果一个用户有个人资料图片，那么所有用户都会显示相同的图片。我需要帮助找出我的代码中的错误。

export interface UserData {
 id: number,
 name: string
}

export interface UserWithImage extends UserData{
  image?: string
}

export interface UserProfileImage {
  id: number,
  url: string
}

从服务中获取必要的数据后，我尝试将个人资料图片推送到 userData。

用户-data.ts

userData: UserWithImage[];
userProfiles: UserProfileImage[];
userProfileImage: UserProfileImage[];

getUserData() {
  this.userData = this.userService.getData();
  this.userProfiles = await this.imagesService.getProfilePicture(this.userData?.map(u => u.id));
  this.userProfileImage = this.userProfiles.filter(u => u.url);
  this.userData?.forEach((data, i) => {
    data.image = this.userProfileImage[i].url;
  });
}

images.service.ts

public async getProfilePicture(ids: number[]): Promise<UserProfileImage[]> {
  const toLoad = ids.filter(id => !this.userProfileImages.find(up => up.id === id)).map(u => u);
  if (toLoad || toLoad.length) {
  const loaded = (await firstValueFrom(this.httpClient.post<UserProfile[]> 
  (this.imgService.getServiceUrl(customersScope, `${basePath}settings/users/profil`), JSON.stringify(toLoad), {headers}))).map(sp => {
    return {
      id: sp.userId,
      url: sp.profilepicId ? this.imgService.getServiceUrl(customersScope, 
      `${basePath}web/download/profilepic/${sp.profilepicId}/users/${sp.userId}`, true) : ''
    } as UserProfileImage
  });
  this.userProfileImages = [...loaded, ...this.userProfileImages];
}
return this.userProfileImages;
}

用户-data.html

<div ngFor="data of userData">
  <etc-profil [name]="data.name" [image]="data.image"></etc-profil>
</div>

Answer 1

this.userData = this.userService.getData();

这是异步函数吗（即您是否缺少 await）？

this.userProfiles = await this.imagesService.getProfilePicture(this.userData?.map(u => u.id));

这行会失败是 this.userData 是一个承诺。由于使用了可选链接 (?.)

，this.userProfiles 将是 undefined

this.userProfileImage = this.userProfiles.filter(u => u.url);

这一行似乎什么都不做，过滤器谓词表示任何带有 url 属性但不是 null 或 undefined 的内容都包括在内，但是界面说 url 是 non-optional 并且不支持 null 或 undefined.

this.userData?.forEach((data, i) => {
  data.image = this.userProfileImage[i].url;
});

同样，如果 this.userData 是一个 promise，由于可选链，它不会做任何事情。

如果运行，则假定用户和个人资料图片之间存在 one-to-one 关系（索引计数和顺序必须相同）。

我没有考虑 getProfilePicture 的实施，因为我认为这些问题需要先解决。

打字稿：处理来自服务的数据

Typescript: handle data from service

javascript

service

typescript