gpt4 book ai didi

javascript - 函数不会停止运行 Angular 5

转载 作者:行者123 更新时间:2023-12-01 02:06:43 26 4
gpt4 key购买 nike

我遇到了一些麻烦,我不知道我哪里出了问题......

我有一个函数可以像这样从数据库中获取用户个人资料图片..

userPic(userId) {
this._profileService.getProfilePictureByUserId(userId).subscribe(result => {
return 'data:image/jpeg;base64,' + result.profilePicture;
});
}

然后在我的html中

<div *ngFor="let data of returnedData">
<img [src]="userPic(data.lastModifiedUser.id)" alt="User Profile Picture">
</div>

所以我在数据数组中返回了 99 个对象,因此循环了 99 次

但是每次我运行我的应用程序时都会发生这种情况我的应用程序崩溃了...我不确定我做错了什么??

enter image description here

编辑

我已经尝试过这样做...

<div *ngFor="let data of data; let i = index; trackBy: trackByFn">
<img [src]="userPic(angel.lastModifiedUser.id)" alt="User Profile Picture">
</div>

组件.ts

userPic(userId) {
this._profileService.getProfilePictureByUserId(userId).subscribe(result =>
{
return 'data:image/jpeg;base64,' + result.profilePicture;
});
}

trackByFn(index: any , item: any) {
return index;
}

但是应用程序仍然崩溃

最佳答案

返回Observable<string>并使用async管道输入[src]属性和使用trackby*ngFor指令

userPic(profilePictureId, userId): Observable<string> {
if (profilePictureId && userId && this.tenantId) {
console.log('getprofilepicture');
return this._profileService.getFriendProfilePictureById(profilePictureId, userId, this.tenantId).pipe(map(result => {
if (result && result.profilePicture) {
return '../../../assets/img/default-profile-picture.png';
// return 'data:image/jpeg;base64,' + result.profilePicture;
} else {
return '../../../assets/img/default-profile-picture.png';
}
}));
} else {
console.log('didnt run');
return Observable.of('../../../assets/img/default-profile-picture.png');
}
}

trackByFnById(index, item) {
return item.lastModifiedUser.id;
}

模板

<div *ngFor="let data of returnedData; trackBy: trackByFnById">
<img [src]="userPic(data.lastModifiedUser.profilePictureGuid, data.lastModifiedUser.id) | async" alt="User Profile Picture">
</div>

记住导入必要的模块和库。

关于javascript - 函数不会停止运行 Angular 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50054194/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com