来自带有 ViewChild 的代码的 Angular 5 触发事件答案

【问题标题】：Angular 5 trigger event from code with ViewChild来自带有 ViewChild 的代码的 Angular 5 触发事件
【发布时间】：2018-06-26 18:30:21
【问题描述】：

Angular 中是否可以通过 typescript 中的方法触发 HTML 中定义的更改事件？

我正在通过 ViewChild 获取我的选择器。

@ViewChild('org3') org3Selector: HTMLSelectElement;

并且该元素有一个change 事件集：

<select class="form-control" id="orgLevel3" name="orgLevel3" #org3
        (change)="onOrg3Change($event.target.value, org4, org5)">
    <option>-- Select --</option>
    <option *ngFor="let name of validOrgLevel3" value="{{name.id}}">
        {{name.name}}
    </option>
</select>

其中org4 和org5 只是另外两个选择元素。

如果我希望根据我通过代码执行的操作（例如手动更改选择的值）调用该方法，我应该以某种方式“触发”该事件，还是我的代码应该手动调用 @987654326 @ 方法，因为我有对 select elemetn 的引用？

【问题讨论】：

标签： angular angular5 viewchild

【解决方案1】：

值更改后，您需要手动触发事件。 Angular 不知道任何 html 元素值的值是否从代码中改变（这意味着不是通过交互）

您可以通过以下方式发出事件：

@ViewChild('org3') org3: ElementRef;

this.org3.nativeElement.value = 'two';
this.org3.nativeElement.dispatchEvent(new Event('change'));

看这个简单的demo

【讨论】：

我看到你的例子有效，但是当我设置我的值时，它实际上并没有改变下拉列表:(
我将它设置为id，它肯定在validOrgLevel3 数组中。我在控制台中没有收到任何错误，但选择器没有改变。
它确实发生了变化，我已经使用与您完全相同的代码更新了演示链接。再次查看演示。