时间戳

首页 > 解决方案 > div在角度6中切换显示/隐藏父子关系

html - div在角度6中切换显示/隐藏父子关系

问题描述

我在具有父子关系的 div 中有值列表。当我切换任何特定的父记录时，与其他父关联的所有子记录也会打开。我从服务（API）绑定这个 div

请找到用于上述功能的示例代码

 <div class="table rts-table-parentChild" *ngFor="let  userRole of userRoleActions; let i = index">
<div class="table-row table-header">
    <div class="table-cell">
        <span *ngIf="userRole.userRoleSubActions.length" id="section{{userRole.actionName}}"
        class="margin-right-5 fa fa-plus-circle" role="button"
        tabindex="0" [ngClass]="[clickPlus === false ? 'fa fa-plus-circle' : 'fa fa-minus-circle']"  (click)="clickPlus=!clickPlus"></span>
        {{userRole.actionName}}
    </div>
    <div class="table-cell">
        <input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"    id="ChekCreate{{userRole.actionName}}" [(ngModel)]="userRole.isCreateChecked"
        (click)="selectParentRole(i,'create')">
    </div>
   <div class="table-cell">
        <input type="checkbox"[ngModelOptions]="{standalone: true}" class="setup-checkbox" id="ChekDelete{{userRole.actionName}}" [(ngModel)]="userRole.isDeleteChecked"
        (click)="selectParentRole(i,'delete')">
    </div>
</div>

<ng-container *ngIf="clickPlus">
<div style="display:table-row-group;" *ngFor="let item of userRole.userRoleSubActions; let j = index">
  <div class="table-row ">
    <div class="table-cell" class="subj"> {{item.actionName}}</div>
        <div class="table-cell">
        <input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
            [(ngModel)]="item.isCreateChecked" (change)="isCreateChecked(i,'create')">
        </div>
        <div class="table-cell">
            <input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
            [(ngModel)]="item.isDeleteChecked" (change)="isCreateChecked(i,'delete')">
        </div>
    </div>
</div>
</ng-container>

标签： htmlangulartoggle

解决方案

嗨，因为在变量 clickPlus上切换这就是为什么特定父记录，所有父记录都被切换。所以你必须添加

show:boolen

在 userRoleActions 模型和点击事件中，您可以像这样切换

(click)="userRole.show=!userRole.show"

希望您理解我的观点，这可能会对您有所帮助。

推荐阅读