如何解决不加载角度(chrome)中的元素错误的问题?

时间:2019-08-21 19:13:20

标签: angular google-chrome

我正在获取球队和球员的列表,我想显示所选球队的所有球员。在开始时,应该自动选择并显示列表中的第一支队伍。

一切在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;
    }
  }
}

0 个答案:

没有答案