Angular4 传递选择值，以便显示轮播

Question

我选择了各种足球队。当我点击一支球队时，我想要一个轮播显示俱乐部的球员。我都存储在数据库中。

我设法获得了选项值，但轮播将显示所有球员，而不仅仅是所选俱乐部的球员。问题肯定出在打字稿文件中，在函数中，因为我无法将旋转木马连接到选定的俱乐部。请帮助我，我将不胜感激。

players.component.html

<div class="container-fluid" id="selectclub">
    <div class="row">
        <h2>Select which team</h2><br>


        <select data-style="btn btn-primary" (change)="selectOption();" [(ngModel)]="club_IDClub">
            <option [value]="club.IDClub" *ngFor="let club of clubs">{{club.ClubName}}</option>

        </select>
        <hr />



    </div>
</div>

<div class="container-fluid" id="myPlayerCarousel">
    <carousel id="myPlayerCarousel" >
        <slide *ngFor="let player of players">

            <img [src]="sanitize(player.PlayerPhotoURL)"  />
            <div class="carousel-caption d-none d-md-block">
                <h4>{{player.PlayerName}}, {{player.Nationality}}, Age: {{player.PlayerAge}} </h4>
                <hr />



            </div>
        </slide>


    </carousel>

    </div>

players.component.ts

export class PlayersComponent implements OnInit {


    @ViewChild('selectclub')
    @ViewChild('myPlayerCarousel') el: ElementRef
    myPlayerCarousel: CarouselComponent;

    clubs: IClub[];
    club: IClub;
    msg: string;
    indLoading: boolean = false;

    players: IPlayer[];
    player: IPlayer;
    selectedOption: string;

    constructor(private _userService: UserService, private _DomSanitizationService: DomSanitizer) { }

    ngOnInit(): void {
        this.LoadClubs();
        this.LoadPlayers();

    }


    LoadClubs(): void {
        this.indLoading = true;
        this._userService.get(Global.BASE_USER_ENDPOINT).subscribe(clubs => {
            this.clubs = clubs;
            this.indLoading = false;

        }, error => this.msg = <any>error);
    }

    LoadPlayers(): void {
        this.indLoading = true;
        this._userService.get(Global.BASE_USER_ENDPOINT2).subscribe(players => {
            this.players = players;
            this.indLoading = false;

        }, error => this.msg = <any>error);
    }
    club_IDClub : string;

    selectOption() {

        var inputValue = this.club_IDClub;
        this.player = this.players.filter(x => x.ClubID == inputValue)[0];

    }
    sanitize(url: string) {
        return this._DomSanitizationService.bypassSecurityTrustUrl(url);
    }
}​

Answer 1

你可以这样做： 您应该根据选择填充您的 players 变量

selectOption() {
    var inputValue = this.club_IDClub;
    this.players = this.players.filter(x => x.ClubID == inputValue);
}