как я могу получить доступ к данным json API для вложенных сервисов в angular7, используя наблюдаемые?

Question

Я создал проект для извлечения данных из API веб-службы.Но у веб-службы есть вложенные массивы, которые тоже нужно отображать, как я могу получить доступ к данным из вложенных JSON-массивов? Как правильно писать в HTML, чтобы получать данные из веб-службы.Кстати, когда я выбираю первые объекты, которые он показывает правильно, только во вложенных объектах.

Я создал проект для извлечения данных из API веб-службы.Но у веб-службы есть вложенные массивы, которые тоже нужно отображать, как я могу получить доступ к данным из вложенных JSON-массивов? Как правильно писать в HTML, чтобы получать данные из веб-службы.Кстати, когда я выбираю первые объекты, он показывает правильно, только во вложенных объектах.[введите описание изображения здесь] [1]

{
"$id": "1",
"result": null,
"error": false,
"message": "worked succesfully",
"dataArray": [
    {
        "$id": "2",
        "courseImage": "http://localhost:54615/courseImage/Biology.png",
        "courseName": "Biology",
        "courseDet": [
            {
                "$id": "3",
                "addedtime": "Just Now",
                "courseDetName": "download bialogy paper",
                "courseDetCode": "b-382"
            },
            {
                "$id": "4",
                "addedtime": "11:23 PM",
                "courseDetName": "submit a test paper for checking",
                "courseDetCode": ""
            },
            {
                "$id": "5",
                "addedtime": "08:20 PM",
                "courseDetName": "attend a test",
                "courseDetCode": ""
            }
        ]
    },
    {
        "$id": "6",
        "courseImage": "http://localhost:54615/courseImage/Biology.png",
        "courseName": "Chemistry",
        "courseDet": [
            {
                "$id": "7",
                "addedtime": "Just Now",
                "courseDetName": "download bialogy paper",
                "courseDetCode": "b-382"
            },
            {
                "$id": "8",
                "addedtime": "11:23 PM",
                "courseDetName": "submit a test paper for checking",
                "courseDetCode": ""
            },
            {
                "$id": "9",
                "addedtime": "08:20 PM",
                "courseDetName": "attend a test",
                "courseDetCode": ""
            }
        ]
    },
    {
        "$id": "10",
        "courseImage": "http://localhost:54615/courseImage/Biology.png",
        "courseName": "Physics",
        "courseDet": [
            {
                "$id": "11",
                "addedtime": "Just Now",
                "courseDetName": "download bialogy paper",
                "courseDetCode": "b-382"
            },
            {
                "$id": "12",
                "addedtime": "11:23 PM",
                "courseDetName": "submit a test paper for checking",
                "courseDetCode": ""
            },
            {
                "$id": "13",
                "addedtime": "08:20 PM",
                "courseDetName": "attend a test",
                "courseDetCode": ""
            }
        ]
    }
]

} courseinfo.ts

export class Coursepost {
result: string;
error:string;
message:string;
dataArray:[];

}

courseinfo.service.ts

getAboutPosts() {
return this.http.post('',"");

}

Answer 1

Чтобы получить доступ к вложенным данным, вам нужно перебрать массив и записать данные на экран.

Установите ответ от API для нового экземпляра вашей Объектной модели, а затем в HTMl вам нужно зациклить ваши элементы во вложенном массиве, вам потребуется 3 модели, чтобы соответствовать входящим данным, как это

export class Object{
    $id: number;
    result: string;
    error: string;
    message: string;
    dataArray: data[];
}

export class data{
    $id: number;
    courseImage: string;
    courseName: string;
    courseDet: courseInfo[];
}

export class courseInfo{
    $id: number;
    addedtime: datetime;
    courseDetName: string;
    courseDetCode: string;
}

Затем вам нужно перебрать все объекты примерно так:

<div *ngFor="let data of Object.dataArray">

   <p>{{data.courseName}}</p>
   <p>{{data.courseImage}}</p>

   <div *ngFor="let course of data.courseDet"> 
      <p>{{course.addedtime}}</p>
      <p>{{course.courseDetName}}</p>
      <p>{{course.courseDetCode}}</p>
   </div>

</div>

Синтаксис может быть не идеальным, так как я пишу из памяти, однако вывод должен выглядеть примерно так:

Biology
<img>
download biology paper
submit a test paper for checking
attend a test

Chemistry
<img>
download biology paper
submit a test paper for checking
attend a test

Physics
<img>
download biology paper
submit a test paper for checking
attend a test