Данные ответа API не соответствуют функции angular 5

Пожалуйста, найдите код ниже для лучшего понимания

часть-информация-component.ts

    import { Component, OnInit, Input } from '@angular/core';
    import { FormGroup, FormControl, FormArray, Validators, FormBuilder, NgForm } 
   from '@angular/forms';
    import { CustomValidators } from '../../directives/custom-validator.directive';
    import { logbaseService } from "../../services/logbase.service";

    @Component({
    selector: 'app-part-info',
    templateUrl: './part-info.component.html',
    styleUrls: ['./part-info.component.css']
    })
    export class PartInfoComponent implements OnInit {

    @Input() partInfoData: string;
    partInfo: any = null;
    partInfoForm: FormGroup;

    partNumber: FormControl;
    followingProcess: FormControl;
    deliveryPoint: FormControl;
    partWeight: FormControl;
    partMaterial: FormControl;
    creationDate: FormControl;
    changeDate: FormControl;
    predecessorNo: FormControl;
    lotsSize: FormControl;
    partClassification: FormControl;
    width: FormControl;
    length: FormControl;
    height: FormControl;
    status: FormControl;

    constructor(private form: FormBuilder, private logBaseService: logbaseService) {

    }

    ngOnInit() {
    this.getAllProductInfo();
    this.createFormControls();
    this.createForm();
    console.log(JSON.stringify(this.partInfo));
    };

    getAllProductInfo() {
    this.logBaseService.getPartsInfoAPI()
    .subscribe(
      data => this.partInfo = data.partInfo, // data is available only here
      error => console.log('Server Error')
    )
    }

    createFormControls() {
    this.partInfoForm = new FormGroup({
      partNumber: new FormControl(),
      partName: new FormControl({ value: '', disabled: true }),
      followingProcess: new FormControl({ value: '', disabled: true }),
      deliveryPoint: new FormControl({ value: '', disabled: true }),
      partWeight: new FormControl('', Validators.required),
      partMaterial: new FormControl(),
      creationDate: new FormControl({ value: '', disabled: true }),
      changeDate: new FormControl(),
      predecessorNo: new FormControl(),
      lotsSize: new FormControl('', Validators.required),
      partClassification: new FormControl(),
      width: new FormControl('', Validators.required),
      length: new FormControl('', Validators.required),
      height: new FormControl('', Validators.required),
      status: new FormControl()
    });
    };

    createForm() {
    // this.partInfoForm = new FormGroup({
    //   partNumber: this.partInfoData.partNumber
    // });
    }

    saveForm(partInfoForm: NgForm) {

    console.log('Form saved successfully.');
    console.log(partInfoForm.value);
    }
    }

Здесь getAllProductInfo() вызовет сервисный API, чтобы получить все данные из json-файла. Который работает нормально.

И данные ответа доступны только внутри функции getAllProductInfo(). Когда я пытаюсь выполнить console.log, он отображается как null.

Пожалуйста, дайте мне знать, как сделать данные ответа доступными через компонент. Если вам нужны какие-либо другие детали, пожалуйста, дайте мне знать.


person nkdweb    schedule 10.01.2018    source источник


Ответы (1)


Это связано с тем, что работа приложения асинхронна. Вы сделали вызов, и прежде чем получить ответ, вы читаете переменную в другом методе.

Решение для этого. Добавьте Promise и подождите, пока веб-сервис вернет вам ответ. Как только вы получите ответ, продолжите свою бизнес-логику.

person Rohan Kadu    schedule 10.01.2018
comment
Является ли добавление обещания единственным решением этой проблемы, или у нас есть какой-либо рекомендуемый способ решения этой проблемы. - person nkdweb; 11.01.2018
comment
Я в основном использовал обещание и получил много руководств, в которых использовалось обещание ждать ответа веб-сервиса, а после его разрешения переходить к вашей бизнес-логике. - person Rohan Kadu; 11.01.2018