Angular4 Pass выберите значение, чтобы появилась карусель

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