ngControlを使用してポリマーのペーパードロップダウンメニューをバインドできますか？

Question

ポリマーコントロールを使用してAngular2でフォームを作成しようとしています。選択した値のドロップダウンをコンポーネントのコントロールにバインドする方法はありますか？私は運がないものすべてを試しました。誰もがこの障害を乗り越えましたか？

作業paper-inputの例は次のとおりです。

テンプレート：

<paper-input type="password" 
      ngControl="password" 
      ngDefaultControl> 
</paper-input> 

コンポーネント：

constructor(private fb:FormBuilder) { 

    this.loginForm = fb.group({ 
     password: new Control("") 
    }); 
} 

paper-dropdown-menuのための同様のものがありますか？値へのバインディングかテキスト自体は問題ありません。ありがとう！

Answer 1

カスタムが必要ですControlValueAccessor私はpaper-dropdown-menu自身のためではなく、やったpaper-dropdown-menu

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


@Directive({ 
    selector: 'paper-listbox', 
    host: {'(iron-activate)': 'onChange($event.detail.selected)'}, 
    providers: [PAPER_MENU_VALUE_ACCESSOR] 

}) 
export class PaperMenuControlValueAccessor implements ControlValueAccessor { 
    onChange = (_:any) => { 
    }; 
    onTouched =() => { 
    }; 

    constructor(private _renderer:Renderer, private _elementRef:ElementRef) { 
    console.log('PaperMenuControlValueAccessor'); 
    } 

    writeValue(value:any):void { 
    //console.log('writeValue', value); 
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'selected', value); 
    } 

    registerOnChange(fn:(_:any) => {}):void { 
    this.onChange = fn; 
    } 

    registerOnTouched(fn:() => {}):void { 
    this.onTouched = fn; 
    } 
} 

などの参照も

• ngModel Binding on Polymer dropdown (Angular2)
• Bind angular 2 model to polymer dropdown