Issue
I'm creating an app using angular + ionic. In the app users can set up accounts and very other peoples accounts. I'm displaying other user accounts on one page but when I try to display the current users account on their own page I am getting this error:
Can someone help me out with this error, please? The issue is when I try to call relevantArtist.name on the tab4 page
tabs.page.ts:
export class Tab4Page implements OnInit, OnDestroy {
loadedArtist: Artist[];
relevantArtist: Artist[];
isLoading = false;
private artistSub: Subscription;
constructor(
private artistService: ArtistService,
private authService: AuthService
) { }
ngOnInit() {
this.artistSub = this.artistService.artist.subscribe(artist => {
this.loadedArtist = artist;
this.relevantArtist = this.loadedArtist;
this.loadedArtist = this.relevantArtist.slice(1);
this.authService.userId.pipe(take(1)).subscribe(userId => {
this.relevantArtist = this.loadedArtist.filter(
artist => artist.userId === userId
);
});
});
}
ionViewWillEnter() {
this.isLoading = true;
this.artistService.fetchArtist().subscribe(() => {
this.isLoading = false;
});
}
ngOnDestroy() {
if (this.artistSub) {
this.artistSub.unsubscribe();
}
}
}
tag4.page.html:
<ion-header>
<ion-toolbar>
<!-- add menuId to have different menus -->
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
<ion-title>{{ isLoading ? 'Loading...' : relevantArtist.name }}</ion-title>
</ion-title>
</ion-toolbar>
<ion-content>
</ion-content>
tabs-routing.module.ts:
{
path: '',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
},
{
path: 'discover/:artistId',
loadChildren: () => import('../tab1/discover/artist-details/artist-details.module').then(m => m.ArtistDetailsPageModule)
},
{
path: 'discover-venue/:venueId',
loadChildren: () => import('../tab1/discover/venue-details/venue-details.module').then(m => m.VenueDetailsPageModule)
}
]
},
{
path: 'tab4',
children: [
{
path: ':artistId',
loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
},
{
path: 'edit/:artistId',
loadChildren: () => import('../tab4/edit-page/edit-page-routing.module').then(m => m.EditPagePageRoutingModule)
}
]
},
The information that it's calling on is located in a service that uses firebase. The other pages have no issues at all and I'm very confused as to why this one does.
Any help is appreciated!
Solution
It seems that the problem is that relevantArtist
is an array of Artist
not the object Artist
. The Filter function creates a new array that passes the condition set.
Looking at your implementation it seems that the "current user" will always be a single instance of Artist
.
One solution, always assuming that the userId is unique, is to simply get the element 0 of that array.
<ion-title>{{ isLoading ? 'Loading...' : relevantArtist[0].name }}</ion-title>
Another, more elegant solution, always assuming that userId
is unique for each artist is to use the function find instead of filter, this way you will get a single Artist
.
You would need to do the following changes on your code to add a new variable to store the current user information:
...
// Artist[] => Artist
currentArtist: Artist;
...
// filter => find
this.currentArtist = this.loadedArtist.find(artist => artist.userId === userId);
Also could create a pipe to do use find
directly on the template.
find.pipe.ts
import {
Injector,
Pipe,
PipeTransform
} from '@angular/core';
@Pipe({
name: 'find'
})
export class FindPipe implements PipeTransform {
public constructor(private readonly injector: Injector) {
}
transform(value: Array<any>, callback: any): any {
return value.find(callback);
}
}
In your .ts, add the filter function
findCurrentUser(artist: Artist): boolean {
return artist.userId === userId;
}
In your tab4.page.html
<ion-title>
{{ isLoading ? 'Loading...' : relevantArtist.name | find: findCurrentUser}}
</ion-title>
Answered By - Ruina
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.