Question

在一个div中，我只填充表的几列，当我点击特定行的“See”时，我想查看该表的其余列（现在它填充所有行，但是自然）。

我的HTML：

<div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col">
            <div class="populate-table" [hidden]="!halls">
                <table>
                    <tr>
                        <th>Name</th>
                        <th>Landmarks</th>
                        <th>Seating capacity</th>
                        <th>Details</th>
                    </tr>
                    <tr *ngFor="let item of halls">
                        <td> {{ item.name }} </td>
                        <td> {{ item.landmarks }} </td>
                        <td> {{ item.seating_capacity }} </td>
                        <td> <a (click)="clicked(item.id)"> See </a> </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="mdl-cell mdl-cell--4-col">
            <div [hidden]="!openDiv">
                <p>Remaining details of the selected hall will appear here</p>
                <tr *ngFor="let item of halls">
                        <td> {{ item.ac }} </td>
                        <td> {{ item.avg_user_rating }} </td>
                        <td> {{ item.rent }} </td>
                    </tr>
            </div>  
        </div>

我的组件功能：

halls: Object;
    openDiv : boolean;
    specific_hall : Object

    constructor(private homeService: HomeService){}

    fetchData(cityId: any) {

        if(this.openDiv==true){
            this.openDiv=false
        }

        this.homeService.fetchData(cityId).then(
            data => {
                this.halls = data;

            });
    }

    clicked(item: any){

        this.openDiv=true;
        this.specific_hall=this.halls[item]

    }

我需要做些什么来解决这个问题？第二个表也可以是一个列表，以便更好地查看。

Answer 1

以下是您应该执行的操作，(click)应该设置specific_hall，然后在设置该属性时显示下一个表格，其中包含基于specific_hall

的更多详细信息

PLUNKER

让你的html看起来像这样

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col">
        <div class="populate-table" [hidden]="!halls">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Landmarks</th>
                    <th>Seating capacity</th>
                    <th>Details</th>
                </tr>
                <tr *ngFor="let item of halls">
                    <td> {{ item.name }} </td>
                    <td> {{ item.landmarks }} </td>
                    <td> {{ item.seating_capacity }} </td>
                    <td> <a (click)="clicked(item)"> See </a> </td> <!-- MAKE CHANGE HERE -->
                </tr>
            </table>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col"> <!-- THIS WHOLE DIV CHANGED -->
        <div *ngIf="specific_hall">
            <p>Remaining details of the selected hall will appear here</p>
            <ul>
                <li>AC: {{ specific_hall.ac }}</li>
                <li>Avg User Rating: {{ specific_hall.avg_user_rating }}</li>
                <li>Rent: {{ specific_hall.rent }}</li>
            </ul>
        </div>  
    </div>
</div>

让您的组件看起来像这样

halls: Object;
specific_hall : Object

constructor(private homeService: HomeService){}

fetchData(cityId: any) {

    if(this.specific_hall){
        this.specific_hall = null;
    }

    this.homeService.fetchData(cityId).then(
        data => {
            this.halls = data;

        });
}

clicked(item: any){

    this.specific_hall = item // <-- CHANGE THIS

}

Answer 2

不要再为所选项目执行 ngFor 。

<td> <a (click)="clicked(item)"> See </a> </td> ///<<<===changed

clicked(item){
   ...
   this.selectedItem=item;                       ///<<<===added. assign selected object to selectedItem
}

<div class="mdl-cell mdl-cell--4-col">
            <div [hidden]="!openDiv">
                <p>Remaining details of the selected hall will appear here</p>
                <tr>
                        <td> {{ selectedItem.ac }} </td>  
                        <td> {{ selectedItem.avg_user_rating }} </td>
                        <td> {{ selectedItem.rent }} </td>
                    </tr>
            </div>  
</div>

angular2填充特定行的表数据

2 个答案:

PLUNKER