Div 未在 Angular 6 中的特定 ngFor 以下打开

Question

我在 angular 6 中迭代 ngFor。当我单击按钮时，div 应该在该特定按钮的行旁边打开，但它在 ngFor like this 下方打开我想让它为那个特定的行和下面的行打开。

<app-filter></app-filter>

<div class="bg-white" *ngFor="let data of dashboardData">
    <div class="container-fluid">
        <div class="center-align row">
            <div class="col-sm-12">
                <div class="block col-sm-2">
                    {{data.firstname}}{{data.lastname}}
                </div>
                <div class="block_l col-sm-3">
                    <span class="light_small">68%</span>
                    {{data.stage}}
                </div>
                <div class="block_l col-sm-1">
                    Customer
                </div>
                <div class="block_l col-sm-1">
                    <img src="assets/images/call.png">
                </div>
                <div class="block_l col-sm-1">
                    <img src="assets/images/mail.png">
                </div>
                <div class="block_l col-sm-2">
                    <span class="status_color"><b>.</b></span>
                    Paused
                </div>
                <div class="block_l col-sm-2">
                    <a class="btn button_css" (click)="openLayout=!openLayout">verify Details</a>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-loader"></div>
    <div class="container" [hidden]="openLayout">
        <div class="row">
            <app-form-layout></app-form-layout>
            <app-form-desc></app-form-desc>
        </div>
    </div>
</div>

Now it is coming like this

Desired behavior will be like this 就像点击手风琴一样，它应该在该行下方打开，下面的其余行将向下移动

Answer 1

问题出在为所有行共享的 openLayout 变量中。每行需要一个 openLayout。您可以像这样将其动态添加到您的 data 中：

<div class="bg-white" *ngFor="let data of dashboardData">
    <div class="container-fluid">
        <div class="center-align row">
            <div class="col-sm-12">
                <div class="block col-sm-2">
                    {{data.firstname}}{{data.lastname}}
                </div>
                <div class="block_l col-sm-3">
                    <span class="light_small">68%</span>
                    {{data.stage}}
                </div>
                <div class="block_l col-sm-1">
                    Customer
                </div>
                <div class="block_l col-sm-1">
                    <img src="assets/images/call.png">
                </div>
                <div class="block_l col-sm-1">
                    <img src="assets/images/mail.png">
                </div>
                <div class="block_l col-sm-2">
                    <span class="status_color"><b>.</b></span>
                    Paused
                </div>
                <div class="block_l col-sm-2">
                    <a class="btn button_css" (click)="data.openLayout=!data.openLayout">verify Details</a>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-loader"></div>
    <div class="container" [hidden]="data.openLayout">
        <div class="row">
            <app-form-layout></app-form-layout>
            <app-form-desc></app-form-desc>
        </div>
    </div>
</div>

一开始会是false，因为undefined和false一样。

Div 未在 Angular 6 中的特定 ngFor 以下打开

Div is not opening below particular ngFor in Angular 6

accordion

ngfor

angular6