Angular 6父子关系Div的Toggle展开折叠异常问题求助

嘿，我一眼就看出问题所在啦——你现在用的是组件级的单个clickPlus变量来控制所有父项的展开/收起状态，所有父元素都绑定同一个变量，那肯定点一个就全跟着变了！

问题根源 #

你当前的代码里，所有父项的展开状态都依赖同一个clickPlus变量：

[ngClass]="[clickPlus === false ? 'fa fa-plus-circle' : 'fa fa-minus-circle']"
(click)="clickPlus=!clickPlus"
*ngIf="clickPlus"

这就导致只要这个变量一变，所有父项的子元素都会同步显示/隐藏。

修复步骤 #

1. 给每个userRole对象添加独立的展开状态属性

在你获取API数据之后，给每个userRole加上一个isExpanded属性（名字可自定义，语义化即可），初始设为false（默认收起）：

// 假设你在组件里获取数据的方法是这样的
this.yourApiService.getUserRoles().subscribe(data => {
  this.userRoleActions = data.map(role => ({
    ...role,
    isExpanded: false // 给每个角色添加独立的展开状态
  }));
});

2. 修改模板，使用每个userRole自己的状态变量

把原来的clickPlus替换成userRole.isExpanded，这样每个父项的状态都是独立的：

<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]="[userRole.isExpanded === false ? 'fa fa-plus-circle' : 'fa fa-minus-circle']" 
       (click)="userRole.isExpanded=!userRole.isExpanded">
 </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="userRole.isExpanded">
 <div style="display:table-row-group;" *ngFor="let item of userRole.userRoleSubActions; let j = index">
 <div class="table-row ">
 <div class="table-cell 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>
</div>

3. （可选）移除组件里冗余的变量

既然不再使用clickPlus，就把组件类里定义的clickPlus: boolean = false;删掉，避免代码冗余。

额外小优化 #

你模板里子项的第一个单元格重复写了两次class="table-cell"，我已经帮你合并成class="table-cell subj"啦~

内容的提问来源于stack exchange，提问作者Nishanth