Angular4 Передача данных в модал начальной загрузки - PullRequest
Новая
       10

Angular4 Передача данных в модал начальной загрузки

0 голосов
/ 03 февраля 2019

В настоящее время я использую ng2-bs3-modal.У меня есть компонент "клуб", который перечисляет некоторые футбольные клубы из моей базы данных в таблицу.Я преуспел в этой части, но я хочу показать детали клуба в модале.Как я могу это сделать?Я нашел несколько похожих вопросов, но ничего не помогло, так как я новичок в Angular.

club.component.html 

    <div class='panel panel-primary clubtable'>
    <div class='panel-heading'> Premier League Clubs Season 2018-2019 </div>
    <div class='panel-body'>
        <div class='table-responsive'>

            <div class="alert alert-info" role="alert" *ngIf="indLoading">
                <img src="../../images//misc/loader.gif" width="32" height="32" />
            </div>
            <div *ngIf='clubs && clubs.length==0' class="alert alert-info" role="alert"> No clubs found! </div>
            <table class='table table-striped' *ngIf='clubs && clubs.length'>
                <thead > <tr> <th> Name </th>   </tr> </thead>
                <tbody> <tr *ngFor="let club of clubs">  <td>   {{ club.ClubName }} </td> <button title="Details" class="btn btn-primary" (click)="modal.open()"> Details </button>  </tr> </tbody>
            </table>
            <div> </div>
        </div>
        <div *ngIf="msg" role="alert" class="alert alert-info alert-dismissible">
            <button type="button" class=" close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"> &times; </span></button> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only"> Error: </span> {{ msg }}
        </div>
    </div>
</div>

<modal #modal>

    <modal-header [show-close]="true" *ngFor="let club of clubs">
        <h4 class="modal-title"> {{club.ClubName }} </h4>
    </modal-header>
    <modal-body>
        <div class="container-fluid" *ngFor="let club of clubs" >

            <div class="row"> <img src={{club.BadgeURL}} />  </div>
            <div class="row"> <span> Year founded: </span> {{club.YearFounded}}  </div>
            <div class="row"> <span> Location: </span> {{club.Location}}  </div>
            <div class="row"> <span> Nickname: </span> {{club.NickName}}  </div>

        </div>
    </modal-body>
    <modal-footer> <div> <a class="btn btn-default" (click)="modal.dismiss()"> Cancel </a>  </div> </modal-footer>

</modal>

club.component.ts 

import { Component, OnInit, ViewChild } from "@angular/core";
import { UserService } from '../Service/user.service';
import { IClub } from '../Models/club';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { Observable } from 'rxjs/Rx';
import { Global } from '../Shared/global';
@Component({
    templateUrl: 'app/components/clubs.component.html'
})
export class ClubsComponent implements OnInit {


    @ViewChild('modal')
    modal: ModalComponent;
    clubs: IClub[];
    club: IClub;
    msg: string;
    indLoading: boolean = false;
    modalTitle: string;
    badgeURL: string;
    yearfounded: Date;
    location: string;
    nickname: string;

    constructor(private _userService: UserService) { }

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



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

Любая помощь будет чрезвычайно цениться!Заранее спасибо!

1 Ответ

0 голосов
/ 03 февраля 2019

Ну, вы используете ngFor для перебора всех клубов в модальном компоненте - так что очевидно, что все клубы будут отрисованы.Вам как-то придется использовать club.id в вызове функции, чтобы определить, какой клуб отображать.Вы можете достичь этого, поместив ваш modal.show() в другую функцию и вызвать его в событии (click) вашей кнопки сведений.

<button title="Details" class="btn btn-primary" (click)="openClubModal(club.id)"> Details </button>

Функция может выглядеть следующим образом: 

openClubModal(modalId: number) {
    this.club = this.clubs.filter((club) => club.id === clubId));
    this.modal.show();
}

... и затем отображать один клуб в вашем модале: 

    <modal-body>
        <div class="container-fluid">
            <div class="row"> <img src={{club.BadgeURL}} />  </div>
            <div class="row"> <span> Year founded: </span> {{club.YearFounded}}</div>
            <div class="row"> <span> Location: </span> {{club.Location}}  </div>
            <div class="row"> <span> Nickname: </span> {{club.NickName}}  </div>
        </div>
    </modal-body>

У вас будетчтобы также настроить заголовок: 

    <modal-header [show-close]="true">
        <h4 class="modal-title"> {{club.ClubName }} </h4>
    </modal-header>
...