Question

我有这个模板（一部分）：

       <tbody *ngFor='let list of lists'>
                <tr>
                    <td>{{ list.name }}</td>
                    <td>{{ list.location }}</td>
                    <td>{{ list.type_id }}</td>
                    <td>{{ list.gos_prinad_id }}</td>
                    <td>{{ list.disloc_country_id }}</td>
                    <td>{{ list.adm_terr_id }}</td>
                    <td><a (click)="toggleElement()">смотр.</a></td>
                    <td>{{ list.lat }}</td>
                    <td>{{ list.lon }}</td>
                    <td>{{ list.alt }}</td>
                </tr>
                <tr [hidden]="hideElement" *ngFor="let new_var of list.hops">
                    <td>{{ new_var.hop_type }}</td>
                    <td>{{ new_var.id_sl_hop }}</td>
                    <td>{{ new_var.hop_text }}</td>
                </tr>
        </tbody>

这是隐藏的toogleElement()并显示一些数据：

toggleElement(){
        if(this.hideElement) {
            this.hideElement = false;
        }else{
            this.hideElement = true;
        }

现在，当我在每行之后按смотр.打开一个新表单

<tr [hidden]="hideElement" *ngFor="let new_var of list.hops">
                    <td>{{ new_var.hop_type }}</td>
                    <td>{{ new_var.id_sl_hop }}</td>
                    <td>{{ new_var.hop_text }}</td>
                </tr>
        </tbody>

但是我希望这个表格不会在所有行之后重复，并且只能逐个打开。

P.S。对不起我的英语不好。

Answer 1

toggleElement(list){
    list.isVisible= !list.isVisible;
}

<tbody>
    <template ngFor let-list [ngForOf]="lists">
        <tr>
            <td>{{ list.name }}</td>
            <td>{{ list.location }}</td>
            <td>{{ list.type_id }}</td>
            <td>{{ list.gos_prinad_id }}</td>
            <td>{{ list.disloc_country_id }}</td>
            <td>{{ list.adm_terr_id }}</td>
            <td><a (click)="toggleElement(list)">смотр.</a></td>
            <td>{{ list.lat }}</td>
            <td>{{ list.lon }}</td>
            <td>{{ list.alt }}</td>
        </tr>
        <tr [hidden]="!list.isVisible" *ngFor="let new_var of list.hops">
            <td>{{ new_var.hop_type }}</td>
            <td>{{ new_var.id_sl_hop }}</td>
            <td>{{ new_var.hop_text }}</td>
        </tr>
    </template>
</tbody>

仅显示单击的视图

1 个答案: