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

EDIT！

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

这是子组件的样子：

＆＃13;

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

＆＃13;

这就是如何在父组件中使用

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

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

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

Answer 2

事实证明我在使用已弃用的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>

PrimeNG下拉列表选择了项目数据绑定

2 个答案: