angularjs - ngModel Binding en el menú desplegable de Polymer(Angular2)

typescript polymer-1.0

Question

Ok, hasta ahora pude enlazar <paper-radio> , <paper-checkbox> con ngModel utilizando un ControlValueAccessor personalizado para cada uno de ellos. Ahora estoy atascado en <paper-dropdown-menu> Aquí el escenario, puedo capturar el menú desplegable de papel (seleccionar hierro) pero no puedo enlazar de dos vías, es decir, usar ngModel a continuación es la clase de acceso HTML y personalizada

Mi formulario.html

<paper-dropdown-menu [(ngModel)]="mymodel.selection" label="Your Fix">
          <paper-menu class="dropdown-content">
                <paper-item value="1" ngDefaultControl>Coffee</paper-item>
                <paper-item value="2" ngDefaultControl>Cigarettes</paper-item>
                <paper-item value="3" ngDefaultControl>Chivas</paper-item></paper-menu>
</paper-dropdown-menu>

Y mi clase de accesorios personalizados

/**
 * Created by pratik on 12/5/16.
 */
import {
    Query,
    Directive,
    Renderer,
    Self,
    forwardRef,
    Provider,
    ElementRef,
    QueryList
} from ''angular2/core'';

import {ObservableWrapper} from ''angular2/src/facade/async'';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from ''angular2/common'';
import {CONST_EXPR} from ''angular2/src/facade/lang'';

const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => SelectControlValueAccessor), multi: true}));

/**
 * Marks `<option>` as dynamic, so Angular can be notified when options change.
 *
 * ### Example
 *
 * ```
 * <select ngControl="city">
 *   <option *ngFor="#c of cities" [value]="c"></option> Need to change to paper-item
 * </select>
 * ```
 */
@Directive({selector: ''option''})  // Tried changing to paper-item but still doesn''t work
export class NgSelectOption {
}

/**
 * The accessor for writing a value and listening to changes on a select element.
 */
@Directive({
    selector: ''paper-dropdown-menu[ngControl],paper-dropdown-menu[ngFormControl],paper-dropdown-menu[ngModel]'',
    host: {
        ''(iron-select)'': ''onChange($event.target.value)'',           
        ''(input)'': ''onChange($event.target.value)'',
        ''(blur)'': ''onTouched()''
    },
    bindings: [SELECT_VALUE_ACCESSOR]
})
export class SelectControlValueAccessor implements ControlValueAccessor {
    value: string;
    onChange = (_) => {};
    onTouched = () => {};


    constructor(private _renderer: Renderer, private _elementRef: ElementRef,
                @Query(NgSelectOption, {descendants: true}) query: QueryList<NgSelectOption>) {
        this._updateValueWhenListOfOptionsChanges(query);
    }

    writeValue(value: any): void {
        this.value = value;
        this._renderer.setElementProperty(this._elementRef, ''value'', value);
    }

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

    private _updateValueWhenListOfOptionsChanges(query: QueryList<NgSelectOption>) {
        ObservableWrapper.subscribe(query.changes, (_) => this.writeValue(this.value));
    }
}

Answer 1

Ejemplo de trabajo completo. No encontré una forma adecuada de aplicar ControlValueAccessor a <paper-dropdown-menu> sino que lo agregué a la <paper-listbox> embebida. La única desventaja es que puede necesitar un ControlValueAccessor diferente si utiliza un contenido diferente para <paper-dropdown-menu> , la ventaja es que puede usar el ControlValueAccessor con <paper-listbox> incluso cuando no está envuelto en un <paper-dropdown-menu>

import {
    Component,
    Directive,
    Renderer,
    forwardRef,
    Provider,
    ElementRef,
    ViewEncapsulation,
} from ''@angular/core'';

import {NG_VALUE_ACCESSOR, ControlValueAccessor} from ''@angular/common'';

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

@Component({
  selector: ''my-app'',
  directives: [PaperMenuControlValueAccessor],
  encapsulation: ViewEncapsulation.None,
  template: `
<h2>Hello {{name}}</h2>

<paper-menu>
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
</paper-menu>


<paper-dropdown-menu label="Dinosaurs" >
  <paper-listbox class="dropdown-content" [(ngModel)]="selected">
    <paper-item *ngFor="let item of items">{{item}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

<div>selected: {{items[selected]}}</div>      
  `,
})
export class AppComponent {
  items = [''allosaurus'', ''brontosaurus'', ''carcharodontosaurus'', ''diplodocus''];
  selected = 3;
  name:string;

  constructor() {
    this.name = ''Angular2 (Release Candidate!)''
  }

  ngAfterViewInit() {
    //this.selected = this.diplodocus;
  }
}

Ejemplo de Plunker

Actualizar

Encontré una respuesta similar para PaperDropdownMenu lugar del PaperListbox Bind angular 2 para la lista desplegable de polímero