0

我有一个非常奇怪的问题，我无法弄清楚，当使用“Chrome”时，我的对象有时会变为空，但在 IE 中它总是有效。它只发生在我所有的下拉菜单中，但是，像文本框这样的其他控件按预期工作......这是我的代码的简化版本。

注意：dropdrow 绑定正确，所以值在 html 中可用

HTML（使用响应式表单）

     <label for="costCenterId" class="control-label">Cost Center</label>

    <p-dropdown [options]="iCostCenter" optionLabel="cost_center_name"  styleClass="form-control"
 formControlName="costCenter" id="costCenterId" name="costCenter" dataKey="cost_center_id"
          [filter]="true" filterBy="value.cost_center_name">
 </p-dropdown>

TS

    export interface ICostCenter{

        cost_center_id: number,
        cost_center_name: string
    }

    iCostCenter: ICostCenter[]=[];

    ngOnInit() {
     this.getAllCostCenetrs();
this.populateHeaderDet();

    }

    getAllCostCenetrs() {
            this._appParams.getAllCostCenters()
                .subscribe(
                data => {
                    this.iCostCenter = data.result;


                },
               error => 'GetAllCostCenetrs Method: ');

        }

populateHeaderDet() in chrome iCostCenter become null
    {
    this.ersaForm.patchValue({

                   costCenter: this.iCostCenter.find(cc => cc.cost_center_name === this.iRequest.costCenter.cost_center_name)

)};

JSON

{
  "result": [
    {
      "cost_center_id": 1,
      "cost_center_name": "1"
    },
    {

      "cost_center_id":2,
      "cost_center_name": "2"
    }
   ]
}
4

1 回答 1

1

我认为这是因为iCostCenter在您的订阅中填充并且populateHeaderDet()在响应返回之前被调用getAllCostCenters()。

populateHeaderDet()在分配 iCostCenter 后尝试调用

ngOnInit() {
    this.getAllCostCenetrs();
}

getAllCostCenetrs() {
    this._appParams.getAllCostCenters().subscribe(
        data => {
            this.iCostCenter = data.result;
            this.populateHeaderDet();
            },
            error => 'GetAllCostCenetrs Method: ');
    }

populateHeaderDet()
{
    this.ersaForm.patchValue({
               costCenter: this.iCostCenter.find(cc => cc.cost_center_name === this.iRequest.costCenter.cost_center_name)
)};

编辑

从评论看来，您实际上想要做的是在调用该populateHeaderDet()方法之前等待多个可观察对象完成。解决这个问题的一种方法是使用rxjs zip方法。

因为我还没有看到你的其余代码，所以很难确定，但你可以尝试这样的事情

const costCentres$ = this._appParams.getAllCostCenters();
const companyCodes$ = this._appParams.getAllCompanyCodes()

zip(
 costCentres$,
 companyCodes$,
 (costCentres: string[], companyCodes: string[]) => ({costCentres, companyCodes}))
 .subscribe(data => {
   this.iCostCenter = data.costCentres;
   this.companyCodes = data.companyCodes;

   this.populateHeaderDet()
 });
于 2019-03-19T15:56:57.863 回答