I have a requirement to showcase a list of individuals. Each individual has a set of team ids and roles. The displayed list should only include individuals with the role of "player" in the selected team.
It seems to be functioning correctly for the first team, but when I switch to another team, it either displays no one or just one person. What could be causing this issue?
export class HomeComponent implements OnInit {
constructor(private personService: PersonService){ }
ngOnInit() {
this.getTeams();
this.getPlayers();
}
getPlayers(){
this.personService.getPersons().subscribe((persons: Person[])=>{
// set image if unset
for(var i=0; i < persons.length; i++){
if(persons[i]["image"] == ""){
persons[i]["image"] = "assets/images/player.jpg";
}
}
this.persons = persons;
})
}
getTeams(){
this.personService.getTeams().subscribe((teams: Team[])=>{
this.teams = teams;
this.selectedTeam = this.teams[0];
this.load(this.selectedTeam);
})
}
load(team:Team){
if(this.selectedTeam.id != team.id){
this.selectedTeam = team;
console.log(this.selectedTeam);
}
}
}
@Pipe({
name: 'PersonRole'
})
export class PersonRolePipe implements PipeTransform {
public transform(persons: Person[], role: string) {
return persons.filter(person => person.roles.includes(role) === true) as Person[];
}
}
@Pipe({
name: 'PersonTeam'
})
export class PersonTeamPipe implements PipeTransform {
transform(persons: Person[], team: Team) {
return persons.filter(person => person.teams.includes(team.id) === true) as Person[];
}
}
<div id="teams-switch">
<shape-button
*ngFor="let team of teams"
[label]="team.name"
theme="accent"
(click)="load(team)">
</shape-button>
</div>
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig">
<shape-person-card
ngxSlickItem
*ngFor="let person of persons | PersonRole:'player' | PersonTeam:selectedTeam"
class="slide item"
[tag]="person.tag"
[name]="person.name"
[image]="person.image"
[socialmedia]="person.socialmedia">
</shape-person-card>
</ngx-slick-carousel>