4

ngModel を使用して Angular 2 で選択コンポーネント ラッパーを作成しようとしています。選択が変更されるとイベントはすべて正しく発生しますが、レンダリング時に最初の選択を設定できません。

これは私のコンポーネントです:

@Component({
selector: 'my-dropdown',
inputs: ['selectedItem', 'items', 'label'],
outputs: ['selectedItemChange'],
template: `
<div class="field">
  <label>{{label}}</label>
    <select class="ui search selection dropdown" [ngModel]="selectedItem" (change)="onChange($event.target.value)">
      <option value="" selected>Please Select</option>
      <option *ngFor="#item of items" [value]="item.value">{{item.label}}</option>
    </select>
</div>`
})

export class MyDropdownComponent {

items: DropdownValue[];
selectedItem: DropdownValue;
selectedItemChange: EventEmitter<any> = new EventEmitter();

private onChange(newValue) {

    console.log(newValue);
    this.selectedItem = this.items.find(item => item.value == newValue);
    console.log(this.selectedItem);
    this.selectedItemChange.emit(newValue);
}
}

そして、私は次のようなビューでそれを使用しています:

<my-dropdown [items]="selectItems" [(selectedItem)]="itemToSelect" [label]="'Please Select'"></my-dropdown>

init で親コンポーネントの値を設定するitemToSelectと、UI で選択したオプションの値が設定されません。

イベントも使用しようとしましngModelChangeたが、変更イベントが発生しません。

4

2 に答える 2

1

初期化時に親コンポーネントの itemToSelect 値を設定すると、選択したオプションの値が UI に設定されません。

ngOnInit()親で使用していると仮定すると、後で呼び出されるライフサイクル フックの 1 つに値を設定する必要があります(子がまだ に存在しないためngOnInit())、試してくださいngAfterViewInit()...

于 2016-02-24T09:14:38.050 に答える