Question

我正在使用Angular5和primeng库。特别是，我有p-dropdown的问题。我有一个大实体 - 寄售 - 有很多字段，我用这个保存的对象打开页面。并且几个p-dropdown元素（这里是合约组件）不显示选定的值。但是，我确信没有对象的空字段。与p-dropdown选项属性相关联的数组似乎与p-dropdown ngModel相关的@Input（）字段仍为空。如何在启动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>

组件代码：

export class SelectContractComponent implements OnChanges{
  public contracts : Contract[] = [];
  @Input() contract: Contract;
  @Output() contractChange = new EventEmitter();
  @Input() contractor: Contractor;
  selectItems: SelectItem[]= [];

  @Input() disabled: boolean;
  @Input() required: boolean;

  constructor(
    private contractService: ContractService) {
  }


  ngOnChanges(changes: SimpleChanges): void {
    this.getAllContracts();
    const contractor: SimpleChange = changes.contractor;
    this.selectItems = [];
    if (contractor != null && contractor.currentValue != null){
      this.getContractsByContractor();
    }
  }

  private fillSelectItems(contract: Contract){
    this.selectItems.push({label: contract.name, value: contract});
  }

  getContractsByContractor():void {
    this.contractService.getContractsByContractor(this.contractor.id)
      .subscribe(contracts => {
        this.contracts = contracts;
        this.contracts.forEach(c => this.fillSelectItems(c));
      });
  }

  getAllContracts():void{
    this.contractService.getContracts()
      .subscribe(contracts => {
        this.contracts = contracts;
        this.contracts.forEach(c => this.fillSelectItems(c));
      });
  }

  public onContractSelect(){
    this.contractChange.emit(this.contract);
  }

}

来自寄售模板的片段：

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

Answer 1

我找到了解决方案。我必须为ngModel创建一个字段，并在填写selectItems后将此字段分配给收缩字段。

Html模板：

<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>

组件类：

export class SelectContractComponent implements OnChanges{
  public contracts : Contract[] = [];
  @Input() contract: Contract;
  @Output() contractChange = new EventEmitter();
  @Input() contractor: Contractor;
  selectItems: SelectItem[] = [];
  **selectedItem: Contract;**

  @Input() disabled: boolean;
  @Input() required: boolean;

  constructor(
    private contractService: ContractService) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('select contract on changes');
    const contractor: SimpleChange = changes.contractor;
    if (contractor != null && contractor.currentValue != null){
      this.getContractsByContractor();
    } else {
      this.getAllContracts();
    }
    console.log('select contract on changes end');
  }

  getContractsByContractor():void {
    this.contractService.getContractsByContractor(this.contractor.id)
      .subscribe(contracts => {
        this.contracts = contracts;
        this.fillSelectItems();
        console.log('before assign selected item');
        **this.selectedItem = this.contract;**
      });
  }

  getAllContracts():void{
    this.contractService.getContracts()
      .subscribe(contracts => {
        this.contracts = contracts;
        this.fillSelectItems();
        console.log('before assign selected item');
        **this.selectedItem = this.contract;**
      });
  }

  public onContractSelect(){
    this.contractChange.emit(this.selectedItem);
  }

  fillSelectItems():void{
    console.log('filling select items');
    this.selectItems = [];
    this.contracts.forEach(c => this.selectItems.push({label: c.name, value: c}));
    console.log('filling select items end');
  }

}

Answer 2

我在 primeng 的代码中发现了一个竞争条件，如果你设置了你的选项，然后在之后（在同一个线程/函数中）设置你的 selectedOption 它将无法用你的 selectedOption 更新显示。一个快速的解决方法是在设置选项后添加一个 observable（在设置 selectedOption 之前，给primeng 时间更新他们的数据）

public randomSetFunction(options: any, selectedOption: any) {
    this.options = options;
    of(this.options).subscribe(opts => { this.selectedOption = selectedOption });
}

这个问题可能会在以后的Primeng版本中修复（我用7.1.3测试过）

空下拉列表选中的值

2 个答案: