Как решить проблему совместимости типов в машинописи при попытке использовать остальные Api с глубиной json 2+

Question

я пытаюсь использовать Rest Api, отправленный с моего локального сервера с помощью hometead, чтобы показать его в моем угловом приложении, хотя запрос отправляется успешно, как показано на рисунке, но проблема заключается в том, что всякий раз, когда я пытаюсь показать, он говорит «неопределено», я думаю,проблема в том, что у меня json deapth 2+, а скрипт типа не знает, возможно, тип объекта.

Я пробовал десериализовать, но не работал

OwnerClass.ts

    import { Acommodation } from './acommodation';
    import { Taxi } from './taxi';
    import { CarRent } from './car-rent';


    export class Owner {

    id?:string;
    cin:string;
    name:string;
    email:string;
    phone:string;
    accommodations:Acommodation[];
    taxis:Taxi[];
    car_rents:CarRent[];


    }

AcommodationClass.ts

    import {Owner} from './owner';


    export class Acommodation{

    id?:string;
    owner:Owner;
    description:string;
    capacity:string;
    beds:string;
    baths:string;
    availability:boolean;
    prix_night:Float32Array;
    address:string;
    picture:string;
   }

myComponent.component.ts

    import { Component, OnInit } from '@angular/core';
    import { RestApiService } from '../Services/rest-api-Owner.service';
    import { Owner } from '../Classes/owner';
    @Component({
    selector: 'app-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.css']
    })
    export class GridComponent implements OnInit {

    owners:Owner[];
    constructor(private restApiOwner:RestApiService) { }

    ngOnInit() {
    this.restApiOwner.getOwners().subscribe(Owners=> this.owners=Owners);
    console.log(this.owners);
    }

    }

доказательство того, что Rest Api работает и возвращает Json https://imgur.com/Jp3P7VW

неопределенный результат https://imgur.com/xI0OHPj

Answer 1

Проблема связана с размещением этих двух строк:

this.restApiOwner.getOwners().subscribe(Owners=> this.owners=Owners);
console.log(this.owners);

Предположим, что для возврата данных из вызова getOwners() требуется 5 полных секунд, в течение этого времени JavaScript будетне ждать, пока данные вернутся . Таким образом, console.log(this.owners) будет выполнено сразу после того, как вызов подписки «настроен», где this.owners еще не был назначен, и, таким образом, undefined будет распечатано. Вы можете убедиться в этом, сделав вашу сеть очень медленной, используя devtools, и заметите, что распечатка undefined будет напечатана почти мгновенно, даже если сетевой вызов ничего не дал.

Как и при любой асинхронной операции сJavaScript / TypeScript, есть элемент «обратного вызова», который необходимо выполнить. Нет такой вещи, как ожидание с JS как однопоточного и не может позволить себе ждать.

Для обработки асинхронных обратных вызовов могут использоваться следующие подходы:

• обратные вызовы - подход старой школы
• обещания - более распространенный подход, более простой в цепочке
• асинхронный / ожидание - aдругой подход «синтаксис-сахар» к обещаниям, из-за которого код выглядит «ожидающим», но это не так.
• Observables - в Angular observables обрабатываются библиотекой rxjs, которые по сути обещают стероиды.

Поскольку Angular предоставляет rxjs для обработки асинхронного кода, а вы уже используете его, я рекомендую изменить код на следующее:

this.restApiOwner.getOwners().subscribe(Owners=> {
  this.owners=Owners;
  console.log(this.owners);
});

Это работает, поскольку журнал будетнапечатано после данные возвращаются. Технически ваш код всегда работал, но console.log был просто не в том месте и работал не в то время.

Наконец, я рекомендую прочитать больше о том, как JS обрабатывает асинхронные операции в целом, как его ключ. основа языка. Вот mdn статья на тему