angularjs – Angular 2选择组件集初始选择

发布时间：2020-12-17 17:21:41 所属栏目：安全来源：网络整理

导读：我正在尝试使用ngModel在Angular 2中创建一个选择组件包装器.一旦选择被更改,事件都会正确触发,但我无法在渲染时设置初始选择. 这是我的组成部分： @Component({selector: 'my-dropdown',inputs: ['selectedItem','items','label'],outputs: ['selectedItemC

我正在尝试使用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事件,但它不会触发更改事件.

解决方法

itemToSelect最初设置为一个对象,因此MyDropdownComponent的输入属性最初设置为一个对象.但是在onChange()中,一个字符串值是emit()ted,然后将itemToSelect设置为一个字符串,因此输入属性变为一个字符串.不好.

只是始终如一地使用一个对象,它将工作.此外,不需要在onChange()中分配this.selectedItem,因为所选的值将从父级传播回来(通常,您不应该在组件中设置输入属性 – 它看起来也很奇怪).您现在也可以使用ngModelChange：

<select class="ui search selection dropdown" [ngModel]="selectedItem.value"
 (ngModelChange)="onChange($event)">

private onChange(newValue) {
    console.log('nv',newValue);
    selectedItem = this.items.find(item => item.value == newValue);
    console.log('si',selectedItem);
    this.selectedItemChange.emit(selectedItem);
  }
}

Plunker

请注意,我没有解决用户选择“请选择”的问题.你需要在onChange()中添加一些逻辑来处理这种情况.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!