Question

我有li的ngFor和每li我有click。我想要的是当用户点击li时在div中显示/隐藏li。任何建议我怎么能这样做？每个li都有不同的ptechnologyName

<li *ngFor="let billingAccount of billingAccounts" [ngClass]="showRecipient == 'billingAccount?.ptechnologyName' ? 'activerec': 'notactive'" (click)="showRecipient = 'billingAccount?.ptechnologyName'" >
                                    <span ><i class="fa fa-globe"></i></span>
                                    {{billingAccount?.ptechnologyName}}
                                    <div *ngIf="showRecipient == 'billingAccount?.ptechnologyName'">
                                        <table class="custom-table">
                                            <tr (click)="openBaCustomer(billingAccount)">
                                                <td>{{billingAccount?.id}}</td>
                                                <td>{{billingAccount?.customerName}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </li>

在我的情况下打开所有li和所有div ..我想只打开哪一个点击

Answer 1

添加属性showRecipient作为BillingAccount类的属性：

export class BillingAccount {
    id: number;
    ptechnologyName: string;
    customerName: string;
    showRecipient: boolean;
}

组件中billingAccounts数组的示例：

billingAccounts: BillingAccount[] = [
     {"id": 1, "ptechnologyName": "ptech1", "customerName": "cust1", "showRecipient": false },
     {"id": 2, "ptechnologyName": "ptech2", "customerName": "cust2", "showRecipient": false },
     {"id": 3, "ptechnologyName": "ptech3", "customerName": "cust3", "showRecipient": false },
     {"id": 4, "ptechnologyName": "ptech4", "customerName": "cust4", "showRecipient": false }
];

然后，您可以设置此属性以在点击时显示/隐藏div：

<ul>
    <li *ngFor="let billingAccount of billingAccounts" [ngClass]="billingAccount.showRecipient == 'billingAccount?.ptechnologyName' ? 'activerec': 'notactive'"
        (click)="billingAccount.showRecipient = !billingAccount.showRecipient">
        <span><i class="fa fa-globe"></i></span> {{billingAccount?.ptechnologyName}}
        <div *ngIf="billingAccount.showRecipient">
            <table class="custom-table">
                <tr (click)="openBaCustomer(billingAccount)">
                    <td>{{billingAccount?.id}}</td>
                    <td>{{billingAccount?.customerName}}</td>
                </tr>
            </table>
        </div>
    </li>
</ul>

另一种解决方案：

添加一个boolean（showRecipient）数组作为组件类的属性：

billingAccounts: BillingAccount[];
showRecipient: boolean[];

从webservice获取数据后，请填写showRecipient数组：

ngOnInit(): void {
    // Fetch from backend:
    this.billingAccounts = [
        {"id": 1, "ptechnologyName": "ptech1", "customerName": "cust1" },
        {"id": 2, "ptechnologyName": "ptech2", "customerName": "cust2" },
        {"id": 3, "ptechnologyName": "ptech3", "customerName": "cust3" },
        {"id": 4, "ptechnologyName": "ptech4", "customerName": "cust4" }
    ];    
    // Fill in the showRecipient array
    this.showRecipient  = this.billingAccounts.map(it => false);
}

然后在你的模板中：

<ul>
    <li *ngFor="let billingAccount of billingAccounts;  let i = index" [ngClass]="billingAccount.showRecipient == 'billingAccount?.ptechnologyName' ? 'activerec': 'notactive'"
        (click)="showRecipient[i] = !showRecipient[i]">
        <span><i class="fa fa-globe"></i></span> {{billingAccount?.ptechnologyName}}
        <div *ngIf="showRecipient[i]">
            <table class="custom-table">
                <tr (click)="openBaCustomer(billingAccount)">
                    <td>{{billingAccount?.id}}</td>
                    <td>{{billingAccount?.customerName}}</td>
                </tr>
            </table>
        </div>
    </li>
</ul>

Answer 2

你必须在li 中加入额外的div并在其上应用类条件，如下所示：

<div *ngFor="let billingAccount of billingAccounts" (click)="showRecipient = 'billingAccount?.ptechnologyName'" > <li [ngClass]="showRecipient == 'billingAccount?.ptechnologyName' ? 'activerec': 'notactive'"> <span ><i class="fa fa-globe"></i></span> {{billingAccount?.ptechnologyName}} <div *ngIf="showRecipient == 'billingAccount?.ptechnologyName'"> <table class="custom-table"> <tr (click)="openBaCustomer(billingAccount)"> <td>{{billingAccount?.id}}</td> <td>{{billingAccount?.customerName}}</td> </tr> </table> </div> </li> </div>

点击里面显示/隐藏里面的div？

2 个答案: