API 响应数据在函数角度 5 中为空

Question

请在下面找到代码以便更好地理解

part-info-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。

请告诉我如何在整个组件中提供响应数据。如果您需要任何其他详细信息，请告诉我。

Answer 1

这是因为应用程序的工作是异步的。 您已经拨打了电话，在得到响应之前，您正在用另一种方法读取变量。

解决方案是。添加 Promise 并等待 web 服务返回响应。 收到回复后，继续您的业务逻辑。