Question

我正在获取一个团队ID列表和一个包含角色和团队列表的人员列表。现在，我想显示所有在特定团队中具有“玩家”角色的人。然后，我想拿这个球员名单，然后用ngFor将他们打散。当点击按钮时，团队应该切换。

问题：

玩家卡仅在单击按钮后出现
并非所有玩家都出现（但如果我记录“ currentTeamPlayers”，则显示正确的玩家）

我在做什么错了？

  <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 player of currentTeamPlayers" 
    class="slide item"

    [tag]="player.tag"
    [name]="player.name"
    [image]="player.image"

    [socialmedia]="player.socialmedia">
    </shape-person-card>

  </ngx-slick-carousel>

export class HomeComponent implements OnInit {

  players: Person[] = [];
  currentTeamPlayers: Person[] = [];
  teams: Team[] = [];
  selectedTeam: Team;

  // slide config for teams slider
  slideConfig = {
    "slidesToShow": 4,
    "slidesToScroll": 1,
    "dots": true,
    "infinite": true,
    "arrows": false,
    "autoplay": false,
    // responsive interaction
    "responsive": [
      {
        "breakpoint": 768,
        "settings": {
          "slidesToShow": 3,
          "slidesToScroll": 1,
          "autoplay": true,
        },
      },
      {
        "breakpoint": 500,
        "settings": {
          "slidesToShow": 2,
          "slidesToScroll": 1,
          "autoplay": true,
        }
      }
    ]
  };

  constructor(
    private newsService: NewsService,
    private personService: PersonService){}

  ngOnInit() {
    this.getPlayers();
  }

  getPlayers(){
    this.personService.getPersons().subscribe((persons: Person[])=>{

      for(var i=0; i<persons.length; i++){
        // filter all players
        if(!(persons[i]["roles"].includes("player"))){
          persons.splice(i, 1);
        }
      }
      // set image if unset
      for(var i=0; i < persons.length; i++){
        if(persons[i]["image"] == ""){
          persons[i]["image"] = "assets/images/player.jpg";
        }
      }
      this.players = persons;
      this.getTeams();
    })
  }

  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.currentTeamPlayers = [];
      this.selectedTeam = team;
      for(var i=0; i<this.players.length; i++){
        if(this.players[i].teams.includes(this.selectedTeam.id)){
          this.currentTeamPlayers.push(this.players[i]);
        }
      }
    }
  }




}

Answer 1

您可以创建管道来帮助过滤列表：

@Pipe({ 'name': 'PlayerRole' })
export class PlayerRolePipe implements PipeTransform {
  public transform(peopleList: People[], role: PlayerRole) {
    return peopleList.filter(person => person.role === role) as People;
  }
}

然后在模板中执行以下操作：

<div *ngFor="let player of people | PlayerRole: 'Player'>

</div>

如何以角度显示过滤的对象列表？

1 个答案: