PrimeNG 下拉选择项数据绑定

Question

我只是想从下拉菜单中绑定数据ngModel。当应用程序加载时，我收到了一个有意义的错误。

browser_adapter.js:84 EXCEPTION: No value accessor for ''

这使我相信该错误源于ngModel应用程序加载时最初未绑定任何数据的事实。

我不是最擅长使用 Observables...所以要小心。

部分 html 下拉菜单

<p-dropdown [options]="actionsToTake" (onChange)="onToggleCreateActionInput()" 
  [(ngModel)]="action"></p-dropdown>

相关的 TypeScript（排除进口）

export class ActionView {
  public actionsToTake: SelectItem[] = [];
  public action: Action = new Action();

  constructor (private actionCreateService: ActionCreateService) {
    // populate dropdown list (actionsToTake) with data from service call
    this.actionCreateService.getActionFields().subscribe((resp) => {
      for (let i = 0; i < resp.data.data.actionElm.length; i++) {
        this.actionsToTake.push({label: resp.data.data.actionElm[i].name,
          value: resp.data.data.actionElm[i].name});
      }
    });
  }

  public onToggleCreateActionInput = (action): void => {
    // test if something in "action" exists, and then do something based on that
  };
}

因此，当应用程序最初加载时，它action是空的。我希望绑定到的空值ngModel不会破坏应用程序，但也许我误解了错误。最终，我希望绑定所选项目，我认为克服这个错误将使我达到这一点。

Answer 1

事实证明，我处于使用已弃用的 Angular 形式和新的 Angular 形式之间的中间状态。要使用 PrimeNG，请升级到新表单并将其包含在应用程序的引导程序中：

import {disableDeprecatedForms, provideForms} from '@angular/forms';

bootstrap(App, [
  disableDeprecatedForms(),
  provideForms()
]);

然后，在实例化表单的父组件中，我必须更改导入：

import {NgForm, FORM_DIRECTIVES, CORE_DIRECTIVES} from '@angular/common';

到

import {NgForm, FORM_DIRECTIVES, NgModel} from '@angular/forms';
import {CORE_DIRECTIVES} from '@angular/common';

在子组件中，不需要这些导入。您需要包括[ngModelOptions]="{standalone: true}"任何地方[(ngModel)]。所以，就我而言：

<p-dropdown [(ngModel)]="actions" [ngModelOptions]="{standalone: true}"></p-dropdown>