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>

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

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

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

这有效，并且每当我更改所选接口时IP列表都会刷新，但是我意识到与组合（interface_ip）相关的表单控件不会更新。它应该是列表中的第一个IP，但是我保留了原来的值，直到更改为另一个IP。

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

预先感谢

Answer 1

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

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

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

Answer 2

我认为您需要在选项标签内将| ?- split((x + y * (-z)), Atomics). Atomics = [x, y, z] yes | ?- split((x + 3 * (-2)), Atomics). Atomics = [x, 3, -2] yes更改为[value]。

选择标记没有任何值，但是选择标记具有任何值。因此，如果要在选择标记中绑定选项的值，则需要使用angular的[ngValue]，它基本上将选项的值绑定到选择标记。 / p>

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

您需要按以下方式更改代码：

ngValue

Answer 3

因此，如果您需要一个依赖项下拉列表，则只需要像以前一样用数据填充第一个，要填充第二个，就需要使用一个名为valueChanges的反应式表单，它监听那个formControl的更改。

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选择问题

4 个答案: