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);
}