Question

我有父子关系船的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>

Answer 1

嗨，因为要在变量 clickPlus 上切换，这就是为什么要切换特定父记录（所有父记录）的原因。因此，您必须添加

show:boolen

在userRoleActions模型中，在点击事件中，您可以像

一样进行切换

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

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

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

1 个答案: