Angular 7 和 HTML 选择问题

Question

我有一个 Angular 7 响应式(Reactive)表单，其中包含以下字段:

<div class="ui-grid-col-2">
    <select formControlName="network_interface" (change)="onInterfaceChange($event.target.value)">
        <option *ngFor="let ifc of interfaces; let idx = index;" [value]="ifc.id">
            {{ ifc.id }} - {{ ifc.name }}
        </option>
    </select>
</div>
<div class="ui-grid-col-2">
    <select formControlName="interface_ip">
        <option *ngFor="let obj of interfacesIps; let idx = index;" [value]="obj.id">
            {{ obj.name }}&nbsp;({{obj.address}})
        </option>
    </select>
</div>

基本上，它允许用户从存储在数组 interfaces 和 interfacesIps 中的 2 个列表中选择接口(interface)和接口(interface) IP。

一个组合与另一个组合“绑定(bind)”，因此如果我选择一个接口(interface)，则另一个组合必须显示其内部 IP 地址。这是在 onInterfaceChange 事件处理程序中完成的，由 change 事件触发。这就是我所做的:

onInterfaceChange(interfaceId : any): void {
    // NOTE: this.interfaces[INDEX].ips is an array of IP addresses
    this.interfacesIps = this.interfaces[interfaceId].ips;
}

这有效，每当我更改所选接口(interface)时，IP 列表都会刷新，但我意识到与组合 (interface_ip) 关联的表单控件未更新。它应该是列表中的第一个 IP，但我保留旧值，直到更改为另一个 IP。

我已经通过手动更改上面事件处理程序上的表单控件值来修复此问题，但我想知道是否有办法自动执行此操作。

提前致谢，

Answer 1

您可以按如下方式订阅network_interface表单控件值更改；

this.network_interface.valueChanges.subscribe(val => {
// your code here
});

如果您使用的是非字符串值，您可能还需要将 [value] 更改为 [ngValue]