Angular 6：仪表板-ngFor中的唯一ID

Question

我创建了一个仪表板，其中有正在打印的ngFor 在每个* ngFor内，当我们单击侧面导航链接时，我在侧面导航和主页上创建了两个组件，它在服务的帮助下称为一个组件。在导航上单击我正在传递来自服务的消息，它将打开该组件。但是，问题是，当我通过侧面导航调用组件时，每次都会打开所有ngFor和响应调用。如果我调用特定索引的某些组件，则需要使其动态，然后仅应将其打开，而不应用于所有其他组件。以下是该代码：

<div class="marg_top">
    <div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
        <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 row center-align" [hidden]="!data.openLayout">
                        <span class="margin_20">
                            <img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
                        </span>
                        <span class="margin_20">
                            <img src="assets/images/expand.png">
                        </span>
                        <span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">

                            <img src="assets/images/cancel.png">
                        </span>
                    </div>
                    <div class="block_l col-sm-2">
                        <a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
                            Details</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-loader" [hidden]="data.openLayout"></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>
</div>

打字稿代码

 Form_Array: any[] = ["Contact Details", "PAN", "Aadhaar", "Basic", "Address",
    "Regulatory Info", "Segments",
    "Document Upload", "Brokerage", "Review", "In-person verification"
];
ngOnInit() {
    this.getDashboardData();
    this.getBranchName();
    this.assign123 = new FormGroup({
        rmName: new FormControl()
    });

    this.user = JSON.parse(localStorage.getItem("userDetail"));
    console.log(this.user.userName);
    localStorage.setItem("userType", this.user.userName);
    console.log(localStorage.getItem("userType"));
    localStorage.setItem("userDept", this.user.userDept);
    console.log(localStorage.getItem("userDept"));

}
getDashboardData() {
    const param = { "filter": "", "userid": "3" };
    let url = "http://183.182.86.91:8086/user/getSelfAndSubOrdinateApplications";
    // let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getSelfAndSubOrdinateApplications"
    this.http.post(url, param)
        .subscribe(
            (val: any) => {
                console.log("POST call successful value returned in body", val.data);
                this.dashboardData = val.data;

            },
            response => {
                console.log("POST call in error", response);
            },
            () => {
                console.log("The POST observable is now completed.");
            }
        )
};

openForm(appId) {
    localStorage.removeItem("appId");
    this.userDetail = JSON.parse(localStorage.getItem("appId"));
    console.log(this.userDetail);

    const paramData = {
        "ekycApplicationId": appId,

    };
    this.getData = [];
    let urlData = "http://183.182.86.91:8086/review/customerApplicationReview";
    this.http.post(urlData, paramData)
        .subscribe(
            (val: any) => {
                console.log("POST call successful value returned in body", val.data);
                this.getData = val.data;
                console.log(this.getData);
                localStorage.setItem("appId", JSON.stringify(this.getData));
                // for (var i = 0; i < this.remarks.length; i++) {
                //     console.log(this.remarks[i].remarkField);
                //     this.remarkType.push(this.remarks[i].remarkField)
                // }

                // this.remarkType.push(this.remarks)

            },
            response => {
                console.log("POST call in error", response);
            },
            () => {
                console.log("The POST observable is now completed.");
            }
        )
    const param = {
        "ekycApplicationId": this.details.ekycApplicationId,
        "remarkField": ""
    };
    let url = "http://183.182.86.91:8086/remarks/getKycApplicationRemarks";
    this.http.post(url, param)
        .subscribe(
            (val: any) => {
                console.log("POST call successful value returned in body", val.data);
                this.remarks = val.data;
                console.log(this.remarks);
                for (var i = 0; i < this.remarks.length; i++) {
                    console.log(this.remarks[i].remarkField);
                    this.remarkType.push(this.remarks[i].remarkField)
                }

                // this.remarkType.push(this.remarks)
                console.log(this.remarkType);

            },
            response => {
                console.log("POST call in error", response);
            },
            () => {
                console.log("The POST observable is now completed.");
            }
        )
    // });
    let data = JSON.parse(localStorage.getItem('appId'));;

{

}
removeStorage(appId) {
    localStorage.removeItem("appId");
}
assignment(name) {
    alert(this.assign123.value)
    console.log(this.userDetail.ekycApplicationId);
    const param = {
        "eKycApplicationId": parseInt(this.userDetail.ekycApplicationId),
        "toUserId": parseInt(this.assign123.value.rmName),
        "fromUserId": 3
    };
    console.log(param);
    let url = "http://192.168.0.180:8095/ekycApplication/assignEkycApplication";
    this.http.post(url, param)
        .subscribe(
            (val: any) => {
                console.log("POST call successful value returned in body", val.data);

            },
            response => {
                console.log("POST call in error", response);
                if (response.status == 420) {
                    // this.show.changeMessage("Aadhaar");
                    alert("registered");
                }

            },
            () => {
                console.log("The POST observable is now completed.");
            }
        )

}
sort(property) {
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    this.direction = this.isDesc ? 1 : -1;

};
getBranchName() {

    let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/ekycApplication/getAllBranchNames";
    this.http.get(url)
        .subscribe(
            (val: any) => {
                console.log("POST call successful value returned in body", val.data);
                this.branchName123 = val.data;
            },
            response => {
                console.log("POST call in error", response);
                if (response.status == 420) {
                    // this.show.changeMessage("Aadhaar");
                    alert("registered");
                }

            },
            () => {
                console.log("The POST observable is now completed.");
            }
        )
}
getRm(name: string) {
    alert(name);
    let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getAllRMByBranch/" + name;
    this.http.post(url, null)
        .subscribe(
            (val: any) => {
                console.log("POST call successful value returned in body", val.data);
                this.RmName = val.data;

            },
            response => {
                console.log("POST call in error", response);
                if (response.status == 420) {
                    // this.show.changeMessage("Aadhaar");
                    alert("registered");
                }

            },
            () => {
                console.log("The POST observable is now completed.");
            }
        )
}
assign(name) {
    alert(name);
}
open(content, type) {
    console.log(type);

    this.name = type;
    var i;

    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {

        this.closeResult = `Closed with: ${result}`;
        console.log(this.closeResult);
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });


}

private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
    } else {
        return `with: ${reason}`;
    }
}

}

Other Image of DB

Answer 1

将您的子组件相关代码放在* ngFor之外，如下所示：

<div class="marg_top">
    <div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
        <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 row center-align" [hidden]="!data.openLayout">
                        <span class="margin_20">
                            <img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
                        </span>
                        <span class="margin_20">
                            <img src="assets/images/expand.png">
                        </span>
                        <span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">

                            <img src="assets/images/cancel.png">
                        </span>
                    </div>
                    <div class="block_l col-sm-2">
                        <a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
                            Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-loader" [hidden]="data.openLayout"></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>