typescript - PrimeNG 下拉选择项数据绑定(bind)

Question

我只是想用 ngModel 绑定(bind)下拉菜单中的数据。加载应用程序时我收到一个错误，这在某种程度上是有道理的。

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

这让我相信错误源于这样一个事实:ngModel 在应用程序加载时最初未与任何数据绑定(bind)。

我不是最擅长使用 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 是空的。我希望绑定(bind)到 ngModel 的空值不会破坏应用程序，但也许我误解了错误。最终我希望选定的项目被绑定(bind)，我认为克服这个错误会让我达到这一点。

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 只是一个 bool 变量。

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