Javascript 角度6如果单击显示另一个div，则隐藏所有div（只能显示一个）

我有一个主管列表，当你点击

caret

类时，可以查看其下属

每次单击插入符号都可以查看主管和下属

HTML

<div id="detailed" *ngFor="let summary of summaries; let i = index">
    <div class="list-group">
        <div class="list-group-item" style="position: relative;">
            <div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
                 <i class="zmdi" [ngClass]="{'zmdi-caret-down': detailedInfo[i], 'zmdi-caret-right': !detailedInfo[i]}" style="vertical-align: middle;"></i>
            </div>
            <div class="container-fluid">
                <!-- list of Supervisors -->
            </div>
        </div>
        <div *ngIf="detailedInfo[i] == true">
            <!-- list of Subordinates -->
        </div>
    </div>
</div>

<div id="detailed" *ngFor="let summary of summaries; let i = index">
    <div class="list-group">
        <div class="list-group-item" style="position: relative;">
            <div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
                 <i class="zmdi" [ngClass]="{'zmdi-caret-down': detailedInfo===i, 'zmdi-caret-right': detailedInfo!==i}" style="vertical-align: middle;"></i>
            </div>
            <div class="container-fluid">
                <!-- list of Supervisors -->
            </div>
        </div>
        <div *ngIf="detailedInfo===i">
            <!-- list of Subordinates -->
        </div>
    </div>
</div>

HTML

<div id="detailed" *ngFor="let summary of summaries; let i = index">
    <div class="list-group">
        <div class="list-group-item" style="position: relative;">
            <div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
                 <i class="zmdi" [ngClass]="{'zmdi-caret-down': detailedInfo[i], 'zmdi-caret-right': !detailedInfo[i]}" style="vertical-align: middle;"></i>
            </div>
            <div class="container-fluid">
                <!-- list of Supervisors -->
            </div>
        </div>
        <div *ngIf="detailedInfo[i] == true">
            <!-- list of Subordinates -->
        </div>
    </div>
</div>

<div id="detailed" *ngFor="let summary of summaries; let i = index">
    <div class="list-group">
        <div class="list-group-item" style="position: relative;">
            <div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
                 <i class="zmdi" [ngClass]="{'zmdi-caret-down': detailedInfo===i, 'zmdi-caret-right': detailedInfo!==i}" style="vertical-align: middle;"></i>
            </div>
            <div class="container-fluid">
                <!-- list of Supervisors -->
            </div>
        </div>
        <div *ngIf="detailedInfo===i">
            <!-- list of Subordinates -->
        </div>
    </div>
</div>

---

或者简而言之，您可以只执行

detailedInfo.fill（false）

@nash11在这种情况下，它将如何决定detailedInfo数组的长度

detailedInfo.fill（false）

将起作用，如果detailedInfo数组在初始化之前使用了一些长度或元素。感谢您的回复。不幸的是，它在我的控制台上抛出了这个错误<代码>错误：未捕获（承诺中）：TypeError:无法读取未定义的属性“length”@Terence请确保将此代码粘贴到HTML模板中使用的定义摘要数组下面。它在我这方面工作不正常。我仍然可以打开多个下属

detailedInfo: number | null = null;

openSubordinateInfo(i, summary) {

    if(this.detailedInfo === i) {
      this.detailedInfo = null;
    } else {
      this.detailedInfo === i;
    }

}