Question

我目前正在使用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);
    }}

任何帮助将不胜感激！预先谢谢你！

Answer 1

好吧，您正在使用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>

Angular4将数据传递到引导模态

1 个答案: