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

Question

How can I display "empName" and other details of this JSON in my table component in loop?

I'm using a third party API which provides a nested JSON object in return when I send employerID to the API URL.

After subscribing I'm storing the response in a 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": "hr@shreemithra.com",
            "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": "info@shreemithra.com",
            "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
        }
    ]
}

Answer 1

You can bind display data by binding controls in an HTML template to properties of your component.

The easiest way to display a component property is to bind the property name through interpolation. With interpolation, you put the property name in the view template, enclosed in double curly braces: {{AllPostedJobs.status}} .

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

Or depending on your need you can hand over entire result data to another-component.

Now your another-component, should have @Input defined to handle the incoming data:

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

In your another-component template:

<div *ngFor="let student of record?.AppliedStudentDetails">
      <span>{{student.empName}}</span>
      <span [innerText]="student.job_title"></span>
    </div> 

Answer 2

The simplest way is when you receive data from api then send it to a function then apply multiples loop alter your data by add keys in front of data and that values for example

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;

now you can apply *ngfor easily, try this.