Как отобразить элемент вложенного массива json в компоненте, используя Angular 7

Question

Как я могу отобразить "empName" и другие детали этого JSON в моем компоненте таблицы в цикле?

Я использую сторонний API, который предоставляет вложенный объект JSON в ответ, когда я отправляю EmployerID на URL API.

После подписки я сохраняю ответ в переменной "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

Самый простой способ - когда вы получаете данные из 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;

Теперь вы можете легко применить * ng, попробуйте это.

Answer 2

Вы можете привязать отображаемые данные, привязав элементы управления в шаблоне 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>