如何以循环角度激活组件？

Question

我有一个模板：

    <div *ngFor="let order of orders" (click)="showReglamentList =! showReglamentList">
       <app-dropdown-reglaments *ngIf="showReglamentList" [depid]="order.depId"></app-dropdown-reglaments>
    </div>

当用户点击行时，它会切换showReglamentList，因此组件app-dropdown-reglaments 被激活。

但现在它通过服务器请求激活每行（循环）中的所有组件。

我可以这样解决：

    let rowComponentVisibility = {};
    orders.foreach((item, index) => rowComponentsVisibility[index] = false);

然后使用：

*ngIf="rowComponentsVisibility[index]"

问题是我尝试缓存它，并且不再初始化组件，只是隐藏/显示它之前是否已初始化。

如何解决？

Answer 1

您希望在单击时加载组件，ngIf 是一个不错的选择。下面我使用 rowComponentsLoad 数组来跟踪要加载的组件。要显示/隐藏，您可以使用 ngClass 并切换“隐藏”类。您跟踪第二个数组 rowComponentsVisibility 中显示的内容。

<div *ngFor="let order of orders; let i=index;" (click)="loadOrder(i)">
   
    <app-dropdown-reglaments *ngIf="rowComponentsLoad[index]" ngClass="{ 'hide': rowComponentsVisibility[i] }></app-dropdown-reglaments>

</div>

组件

loadOrder(index) {
    this.rowComponentsLoad[index] = true;
    this.rowComponentsVisibility[index] = true;
    hideVisibilityBut(index);
}
hideVisibilityBut(index) {
    for(for i=0;i<this.rowComponentsVisibility.length;i++) {
        if(i!==index) {
            this.rowComponentsVisibility[index] = false;
        }
    }
}

css

.hide {
    display: none;
}