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

我还没有测试它，但从我读到的内容来看，您似乎必须更新您的应用程序才能使用新表单并禁用旧的弃用版本。

import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from '@angular/core';
import {AppComponent} from './app.component'
import {disableDeprecatedForms, provideForms} from '@angular/forms';

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

相关资源 https://github.com/primefaces/primeng/issues/549#issuecomment-230305403

http://forum.primefaces.org/viewtopic.php?f=35&t=46115&p=144059&hilit=no+value+accessor+for#p144059

编辑！

对于嵌套组件，您必须在子组件内实现一个控制值访问器，以便允许父组件控制它。我有一个示例，其中我实现了一个自定义切换组件，但该组件还使用了 prime ng 切换组件。

这是子组件的样子：

import {Component,Input, Provider, forwardRef} from '@angular/core'
import {ControlValueAccessor, NG_VALUE_ACCESSOR, CORE_DIRECTIVES} from '@angular/common';

import {ToggleButton} from 'primeng/primeng'

const noop = () => {};

const CUSTOM_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {
        useExisting: forwardRef(() => CustomToggle),
        multi: true
    });

@Component({
    selector: 'custom-toggle',
    template: `<span>
                  <p-toggleButton
                     [(ngModel)]="value"   >
                  </p-toggleButton>
               </span>`,
    directives: [CORE_DIRECTIVES,ToggleButton],
    providers: [CUSTOM_VALUE_ACCESSOR]
})

export class CustomToggle implements ControlValueAccessor {           
           
    private _value: string;
    
    private _onTouchedCallback: (_:any) => void = noop;
    private _onChangeCallback: (_:any) => void = noop;
    
    get value(): any { return this._value};
    
    set value(v: any) {
        if (v !== this._value) {
            this._value = v;
            this._onChangeCallback(v);
        }
    }
    
    onTouched() {
        this._onChangeCallback;
    }
    
    writeValue(value: any) {
        this._value = value;
    }
    
    registerOnChange(fn: any) {
        this._onChangeCallback = fn;
    }
    
    registerOnTouched(fn: any) {
        this._onTouchedCallback = fn;
    }
    
}

这就是它在父组件中的使用方式

<custom-toggle [(ngModel)]="myToggle"  ></custom-toggle>

其中 myToggle 只是一个布尔变量。

更多关于如何实现控制值访问器的信息： http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

Answer 2

事实证明，我介于使用已弃用的 Angular 表单和新的 Angular 表单之间。要使用 PrimeNG，请升级到新表单并将其包含在您的应用程序的 bootstrap:

中

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

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

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

PrimeNG 下拉选择项数据绑定

PrimeNG dropdown selected item data binding

typescript

primeng

angular