Angular 应用的下拉值未预先填充

Question

我创建了一个表单，其中填充了除下拉列表之外的所有字段

      async initForm() {
    
        this.discpForm = this.formBuilder.group({
          action: ["", [Validators.required]],
         
...
          status: ["In Progress", [Validators.required]],    // In Progress, Voided, Closed
    
          // more items, offense items, evaluator,
          offenses: this.formBuilder.array([]),
          evaluators: this.formBuilder.array([]),
        })
    
        // fetch offense defns, fetch all users
        Promise.all([
         ... series of DB fetch
          this.afStore.doc(`/clients/${this.clientCode}/Performance/OffenseDefns`)
            .ref
            .get()
            .then(res => {
              if (res.exists) {
                let offenses = res.data()
                Object.keys(offenses).forEach(k => {
                  this.optOffenses.push({ label: offenses[k].descr, value: k })
                })
              }
            })
        ])
    
      }

我用红色箭头突出显示了错误。这些是从我的数据库中获取的字段。没有任何控制台错误。

  async initDetails() {
    this.initForm()

    // populate data
    this.discpForm.patchValue(this.discpDoc)
    this.discpForm.get('reportedDate').setValue(new Date(this.discpDoc.reportedDate.seconds * 1000))

    // ...
    this.discpDoc.offenses.forEach(e => {
      this.addOffense(e)
    })
  }

  offenses(): FormArray {
    return this.discpForm.get('offenses') as FormArray
  }
  newOffense(data: any = {}): FormGroup {
    return this.formBuilder.group({
      offense: [data.hasOwnProperty('offense') ? data.offense : '', [Validators.required]],
      reportedDate: [data.hasOwnProperty('reportedDate') ? new Date(data.reportedDate.seconds * 1000) : '', [Validators.required]],
      reportedBy: [data.hasOwnProperty('reportedBy') ? data.reportedBy : '', [Validators.required]],
    })
  }
  addOffense(data: any) {
    this.offenses().push(this.newOffense(data))
  }

模板逻辑，它应该填充文本字段、日期字段、下拉列表，作为逻辑推送通过patchValue和通过方法'newOffense()'分配的值列表

<div class="p-field p-col-3 _float-ui-spacing_">
                    <span class="p-float-label">
                      <p-dropdown [options]="optOffenses" formControlName="offense">
                      </p-dropdown>
                      <p-message severity="error" text="Offense Code is required"
                        *ngIf="!item.get('offense').valid&&item.get('offense').dirty">
                      </p-message>
                      <label>Offense</label>
                    </span>
                  </div>

Answer 1

我认为 [(ngModel)] 绑定了控件：

<p-dropdown id='JobId' name='JobId'
  [options]='employeeData.JobTitles'
  (ngModelChange)='formChange($event)'
  [style]="{'width':'250px'}" #JobId='ngModel'
  [(ngModel)]='model.JobId' placeholder='Select a job...'
  [disabled]='!admin'>
</p-dropdown>