Angular 空下拉选择值

我正在使用Angular5和Priming库。特别是，我对p-dropdown有问题。我有一个大实体-寄售-有许多字段，我打开这个保存的对象页面。几个p下拉元素（这里是合同组件）不显示所选值。但是，我确信没有对象的空字段。看起来，当与p-dropdown-ngModel相关的@Input（）字段不存在时，与p-dropdown-options属性链接的数组仍然是空的。如何在启动ngModel字段之前填写选项数组？或者可能存在其他问题？我的代码如下：

Html模板：

<div class="form-group ui-float-label">
  <p-dropdown [options]="selectItems" [(ngModel)]="contract" [filter]="true" (onChange)="onContractSelect()"
              [style]="{'width':'100%'}" id="contract" placeholder="Select a contract" [required]="required" ></p-dropdown>
  <label for="contract" [hidden]="contract == null">Contract</label>
</div>

<app-select-contract [(contract)]="consignment.costPayerContract" [contractor]="consignment.costPayer"
                                     *ngIf="consignment.costPayer"></app-select-contract>

<div class="form-group ui-float-label">
  <p-dropdown [options]="selectItems" **[(ngModel)]="selectedItem"** [filter]="true" (onChange)="onContractSelect()"
              [style]="{'width':'100%'}" id="contract" placeholder="Select a contract" [required]="required" ></p-dropdown>
  <label for="contract" [hidden]="contract == null">Contract</label>
</div>

来自寄售模板的片段：

<div class="form-group ui-float-label">
  <p-dropdown [options]="selectItems" [(ngModel)]="contract" [filter]="true" (onChange)="onContractSelect()"
              [style]="{'width':'100%'}" id="contract" placeholder="Select a contract" [required]="required" ></p-dropdown>
  <label for="contract" [hidden]="contract == null">Contract</label>
</div>

<app-select-contract [(contract)]="consignment.costPayerContract" [contractor]="consignment.costPayer"
                                     *ngIf="consignment.costPayer"></app-select-contract>

<div class="form-group ui-float-label">
  <p-dropdown [options]="selectItems" **[(ngModel)]="selectedItem"** [filter]="true" (onChange)="onContractSelect()"
              [style]="{'width':'100%'}" id="contract" placeholder="Select a contract" [required]="required" ></p-dropdown>
  <label for="contract" [hidden]="contract == null">Contract</label>
</div>

---

我找到了解决方案。我必须为ngModel创建另外一个字段，并在填写selectItems后将该字段分配给合同的字段

Html模板：

<div class="form-group ui-float-label">
  <p-dropdown [options]="selectItems" [(ngModel)]="contract" [filter]="true" (onChange)="onContractSelect()"
              [style]="{'width':'100%'}" id="contract" placeholder="Select a contract" [required]="required" ></p-dropdown>
  <label for="contract" [hidden]="contract == null">Contract</label>
</div>

<app-select-contract [(contract)]="consignment.costPayerContract" [contractor]="consignment.costPayer"
                                     *ngIf="consignment.costPayer"></app-select-contract>

<div class="form-group ui-float-label">
  <p-dropdown [options]="selectItems" **[(ngModel)]="selectedItem"** [filter]="true" (onChange)="onContractSelect()"
              [style]="{'width':'100%'}" id="contract" placeholder="Select a contract" [required]="required" ></p-dropdown>
  <label for="contract" [hidden]="contract == null">Contract</label>
</div>

---

我在primeng的代码中发现了一个竞争条件，如果您设置了选项，然后将selectedOption设置在后面（在同一线程/函数中），则无法使用selectedOption更新显示。 一个快速的解决方法是在设置选项后添加一个可观察对象（在设置selectedOption之前，给启动时间更新其数据）

public randomSetFunction（选项：任意，选择选项：任意）{
this.options=选项；
订阅（opts=>{this.selectedOption=selectedOption}）；
}

此问题可能在Priming的更高版本中得到修复（我使用7.1.3对此进行了测试）