我正在获取球队和球员的列表,我想显示所选球队的所有球员。在开始时,应该自动选择并显示列表中的第一支队伍。
一切在Firefox上都能正常运行,但是如果我在Chrome上尝试运行,则不会显示所选团队的球员。
我很容易出错。
<div id="teams-switch">
<shape-button
style="margin-left: 1em;"
*ngFor="let team of teams"
[logo]="team.image"
theme="accent"
(click)="loadTeam(team)">
</shape-button>
</div>
<ngx-slick-carousel
id="teams-carousel"
class="carousel"
#slickModal="slick-carousel"
[config]="slideConfigTeams">
<shape-person-card
id="teams-items"
ngxSlickItem
*ngFor="let person of filteredPersons; trackBy: trackPersonById"
class="slide item"
[tag]="person.tag"
[name]="person.name"
[image]="person.image"
[socialmedia]="person.socialmedia">
</shape-person-card>
</ngx-slick-carousel>
export class HomeComponent implements OnInit {
persons: Person[] = [];
filteredPersons: Person[] = [];
teams: Team[] = [];
selectedTeam: Team;
constructor(
private personService: PersonService) {}
ngOnInit() {
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;
//this.loadTeam(this.selectedTeam);
this.filterPersons();
})
this.personService.getTeams().subscribe((teams: Team[]) => {
this.teams = teams;
this.selectedTeam = this.teams[0];
this.loadTeam(this.selectedTeam);
})
}
trackPersonById(person) {
return person.id;
}
filterPersons() {
if (this.selectedTeam && this.persons) {
this.filteredPersons = this.persons.filter(
person =>
person.roles.includes("player") &&
person.teams.includes(this.selectedTeam.id)
) as Person[];
}
}
loadTeam(team: Team) {
console.log(this.selectedTeam.id);
if (this.selectedTeam.id != team.id) {
this.selectedTeam = team;
}
}
}