Javascript 在“角度”中自动选择下拉列表时无法触发更改事件

在我下面的代码中，当选择以编程方式更新时，不会触发onColorChanged。当我进入UI并从下拉列表中选择颜色时，它会触发。不知道发生了什么事

          <div class="card border-0">
                <div class="card-body">
                    <label for="color">
                            <b>Color</b>
                    </label>
                    <select class="form-control" ng-init=null id="colorList" aria-describedby="colorList" *ngIf="myColorList$"
                        [(ngModel)]="selectedColor" (change)="onColorChanged(selectedColor)">
                        <option *ngFor="let c of myColorList$ | async" [ngValue]="c">{{c}}</option>
                    </select>
                </div>
            </div>

颜色
{{c}}

在这种情况下，您必须以编程方式调用

onColorChanged（）

比如：

---

将name属性传递给select标记。 表单元素中的封面选择标记

    <form name="colorForm">

        <select class="form-control" id="colorList" name="myColor" [(ngModel)]="selectedColor" (change)="onColorChanged(selectedColor)"> 
<option *ngFor="let c of myColorList$ | async" [ngValue]="c">{{c}}</option>
 </select>
</form>

{{c}}

在更改所选选项的代码内手动触发onchange事件。更改事件仅在用户实际单击并选择元素时自动触发，而不是在JS代码模拟相同的元素时。为此，您需要订阅FormControl的

valueChanges

observable属性

onColorChanged

不会以编程方式触发。能否显示更新

selectedColor

变量的代码？如果

selectedColor

值与

myColorList$

中的任何值不匹配，则不会调用onChange事件。@Niladri是否对模板驱动的表单执行

valueChanges

操作？我不确定你能详细说明一下吗？

    <form name="colorForm">

        <select class="form-control" id="colorList" name="myColor" [(ngModel)]="selectedColor" (change)="onColorChanged(selectedColor)"> 
<option *ngFor="let c of myColorList$ | async" [ngValue]="c">{{c}}</option>
 </select>
</form>