Question

我正在尝试编写一个自定义指令，如果用户选择＆＃34;全部＆＃34;下拉菜单中的选项会自动选择我能够获取所有选项的所有选项，但这不会更新消费组件上的模型。

自定义指令

@Directive({ selector: '[selectAll]' })
export class SelectAllDirective {
    private selectElement: any;
    private selectedItemsd:number[];

constructor(private el: ElementRef) {
    this.selectElement = el.nativeElement;
}

@HostListener('change')
onChange() {

    if (this.selectElement.options[0].selected) {
        for (let i = 0; i < this.selectElement.options.length; i++) {
            this.selectElement.options[i].selected = true;
        }
    }
}
}

和模板

  <select selectAll multiple
                                ngControl="shoreLocation"
                                #shoreLocation="ngModel"
                                id="shoreLocation"
                                [(ngModel)]="customTask.shoreLocations"
                                name="shoreLocation"
                                class="form-control multi-select"
                                required
                                style="height:150px">

我尝试创建一个@Input并使用框架语法中的banana来尝试更新模型，但我并没有成功。

我能够使用@Output并发出消费组件可以处理类似于https://toddmotto.com/component-events-event-emitter-output-angular-2的事件，但我更愿意，我可以自动更新模型。

我想知道它是否可能？或者，如果创建类似于http://plnkr.co/edit/ORBXA59mNeaidQCLa5x2?p=preview的自定义组件是更好的选择。

提前致谢

Answer 1

在Javascript中设置所选状态并不会发送＆＃34;已更改＆＃34;选择组件上的事件（可能是因为它直接访问子选项，但不确定）。尝试通过以下方式自行触发更改的事件：

if (this.selectElement.options[0].selected) {
    for (let i = 0; i < this.selectElement.options.length; i++) {
        this.selectElement.options[i].selected = true;
    }
    //These are the two new lines
    let changeEvent = new Event("change", {"bubbles":true, "cancelable": false});
    this.selectElement.dispatchEvent(changeEvent);
}

看看是否会触发ngModel更新。

Angular2 Custom Directive双向绑定

1 个答案: