如何使用Angular 7在组件中显示嵌套json数组的项目

问题描述 投票:-1回答:2

如何在循环中的表组件中显示“empName”和此JSON的其他详细信息?

我正在使用第三方API,当我将employerID发送到API URL时,它提供了一个嵌套的JSON对象。

订阅后我将响应存储在var“AllPostedJobs”中

{
    "status": "All Jobs",
    "result": [
        {
            "_id": "5c90fd3cfc7f3b0017803319",
            "job_title": "Web Designer",
            "job_desc": "test description ...",
            "location": "Mangalore",
            "experiance": "Freshers",
            "job_type": "Full-Time",
            "salary_package": "3L",
            "job_keywords": "Photoshop, Illustrator",
            "email_id": "[email protected]",
            "employerID": "5c7e99c2a7a9eb00174de2b2",
            "company_name": "Shreemithra Designs",
            "AppliedStudentDetails": [
                {
                    "_id": "5c9393c1a918d60017de7e55",
                    "empName": "Anup",
                    "empID": "5c939375a918d60017de7e53",
                    "job_title": "Web Designer"
                }
            ],
            "__v": 1
        },
        {
            "_id": "5c913570cb78a100177ab23a",
            "job_title": "Full Stack Developer",
            "job_desc": "htjhsv dhsd jh jds fjshgdfkhsdmhfd;lw eiwiwemsd. This is a sample job description.",
            "location": "Pune",
            "experiance": "2 Years",
            "job_type": "Part-Time",
            "salary_package": "8L - 10L PA",
            "job_keywords": "Angular, Node JS, React, HTML5. CSS3",
            "email_id": "[email protected]",
            "employerID": "5c7e99c2a7a9eb00174de2b2",
            "company_name": "Shreemithra Designs",
            "AppliedStudentDetails": [
                {
                    "_id": "5c9393c9a918d60017de7e56",
                    "empName": "Anup",
                    "empID": "5c939375a918d60017de7e53",
                    "job_title": "Full Stack Developer"
                },
                {
                    "_id": "5ca60fa5ba17730017182ca8",
                    "empName": "Amit Pateriya",
                    "empID": "5c7795acfd39640017ca4c37",
                    "job_title": "Full Stack Developer"
                }
            ],
            "__v": 2
        }
    ]
}
json angular angular7
2个回答
0
投票

最简单的方法是当你从api接收数据然后将它发送到一个函数然后应用倍数循环通过在数据前添加键来改变你的数据和那些值例如

var data = [{"id":1, "name":"smith","applicant":{"roll": 32,"class":10}}];
data[0].applicantRoll = data[0].applicant.roll;
data[0].applicantClass = data[0].applicant.class;

现在您可以轻松申请* ngfor,试试这个。


0
投票

您可以通过将HTML模板中的控件绑定到组件的属性来绑定显示数据。

显示组件属性的最简单方法是通过插值绑定属性名称。使用插值,将属性名称放在视图模板中,用双花括号括起来:{{AllPostedJobs.status}}

<div  id="result-container" *ngFor="let record of AllPostedJobs.result">
   <another-component [record]= "record"></another-component>
</div>

或者根据您的需要,您可以将整个结果数据移交给另一个组件。

现在你的另一个组件,应该定义@Input来处理传入的数据:

export class AnotherComponent {
    @Input() record: Array<any>;

在您的另一个组件模板中:

<div *ngFor="let student of record?.AppliedStudentDetails">
      <span>{{student.empName}}</span>
      <span [innerText]="student.job_title"></span>
    </div> 
© www.soinside.com 2019 - 2024. All rights reserved.