Angular 7 和 HTML 选择问题

Question

我有一个 Angular 7 反应形式，其中包括以下字段：

<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>

基本上，它允许用户 select 来自 2 个列表的接口和接口 IP，存储在数组 interfaces 和 interfacesIps.

中

一个组合是 'tied' 到另一个，所以如果我 select 一个接口，另一个组合必须显示其内部 IP 地址。这是在 onInterfaceChange 事件处理程序中完成的，由 change 事件触发。这就是我所做的：

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

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

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

提前致谢，

Answer 1

您可以订阅network_interface表单控件值变化如下；

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

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

Answer 2

我认为您需要在选项标签内将 [value] 更改为 [ngValue]。

Select 标签没有任何值但是选项标签有 have.so 如果你想在 select 标签中绑定选项的值，你需要使用 angular的 SelectControlValueAccessor 基本上将选项的值绑定到 select 标签。

您可以通过在选项标签内使用 ngValue 来使用 SelectControlValueAccessor。

您需要更改代码如下：

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

Answer 3

所以如果你需要一个依赖下拉列表，你只需要像你已经做的那样用数据填充第一个，要填充第二个你需要使用一种叫做 valueChanges 的反应形式，它会监听那个的变化表单控件。

this.network_interface.valueChanges.subscribe((selectedValue) => {
    /* 
     Here you select wich data to put in other select based on selectedValue
    */
});

Answer 4

感谢您的建议！这就是我所做的：

我已将 [value] 更改为 [ngValue]。现在，下拉列表中的 change 事件不再触发，所以我使用网络接口窗体控件上的 valueChanges 可观察对象在它更改时加载适当的地址：

this.formModel.controls['network_interface'].valueChanges((value) => {
  // Update the addresses on interface change
  this.interfacesIps = this.interfaces[value].ips;
});

现在一切正常。

谢谢大家！

Angular 7 和 HTML 选择问题

Angular 7 and HTML selects issue

angular

angular-reactive-forms