ngModel绑定到聚合物下拉列表（Angular2）

一尘不染

ngModel绑定到聚合物下拉列表（Angular2）

angularjs

好了，到目前为止我是能够成功地结合<paper-radio>，<paper- checkbox>与ngModel通过使用自定义ControlValueAccessor他们的每一个。现在我处于<paper-dropdown- menu> 这种情况，我可以捕获纸张下拉菜单（iron-select），但不能绑定双向，即使用下面的ngModel是HTML和自定义访问器类

我的form.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>

和我的自定义访问器类

/**
 * 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));
    }
}

阅读 236

2020-07-04

共1个答案

一尘不染

完整的工作示例。我没有找到应用合适的方式ControlValueAccessor来<paper-dropdown- menu>，而是将其添加到embeeded <paper- listbox>。唯一的缺点是，ControlValueAccessor如果您对使用了不同的内容<paper-dropdown- menu>，则可能需要使用其他内容。优点是，即使未包装在中，也可以使用ControlValueAccessorwith<paper- listbox>``<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;
  }
}

柱塞示例

更新资料

我找到了类似的答案，PaperDropdownMenu而不是将PaperListbox Angle2模型绑定到聚合物下拉列表

2020-07-04