如何在循环 angular 中激活组件？

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]"

问题是我尝试缓存它，并且不再初始化组件，只是 hide/show 如果它之前被初始化过。

如何解决？

Answer 1

您希望在点击时加载组件，ngIf 是一个不错的选择。下面我使用 rowComponentsLoad 数组来跟踪要加载的组件。要显示/隐藏，您可以使用 ngClass 并切换“隐藏”class。您跟踪显示在第二个数组 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;
}

如何在循环 angular 中激活组件？

How to activate component in loop angular?

angular

angular-ng-if