使用Angular动态转换双向绑定

Question

我有两个下拉菜单。为了使第二个下拉列表可见，我必须在第一个下拉列表中选择一个特定选项。

[如果仅第一个下拉列表中的选项处于选中状态，则我的表单中的值将是像这样的值5613如果在第一个和第二个下拉菜单中选择了选项，则我的表单中的值将是类似于[5613.SubLabel1

的值

第一个下拉菜单根据我的FormControl中的值选择了一个选项，例如5613当我在第二个下拉菜单中选择一个选项时，表单中的值将像上述（5613.SubLabel1）一样附加并制动我的第一个下拉菜单

我尝试分别使用ngModel和ngModelChange来转换表单中第一个下拉菜单的值，但没有成功。

TS

values = [
    {
        "label": "Label1",
        "value": 5613,
        "styleClass": "",
        "fields": ""
    },
    {
        "label": "Label2",
        "value": 8284,
        "styleClass": "",
        "fields": [
            {
                "Field_LabelValue": "SubLabel1",
            },
            {

                "Field_LabelValue": "SubLabel3",
            },
            {
                "Field_LabelValue": "SubLabel2",
            }
        ]
    }
]

onChangeObj(e, item: FormControl, rule: any) {
    this.type = rule.get('conditions').get('all') as FormArray;

    const oldValue = this.type.controls.filter(c => c === item)[0].value;
    const newValue = { fact: oldValue.fact, operator: oldValue.operator, value: oldValue.value + `.${e.target.value}` };

    this.type.controls.filter(c => c === item)[0].setValue(newValue);
}

getFields(valueId: any) {
    if (this.values.filter(v => v.value === valueId).length > 0) {
        return (this.values.filter(v => v.value === valueId) as any)[0].fields;
    }
}

getValueBeforeSeparator(a: any) {
    if (typeof (a) == 'string' && a.indexOf('.') !== -1) {
        const b = parseInt(a.split('.')[0]);
        return b;
    } else {
        let b = parseInt(a);
        return b;
    }

}

HTML

<select
    formControlName="value"
    [ngModel]="getValueBeforeSeparator(condition.get('value').value)"
    (ngModelChange)="condition.get('value').value=$event">
    <option value="" disabled>Select a value</option>
    <option *ngFor="let value of values" [ngValue]="value.value">
        {{value.label}}
    </option>
</select>


<select (change)="onChangeObj($event, condition, rule)">
    <option value="" disabled>Select a field</option>
    <option *ngFor="let field of getFields(condition.get('value').value)">
        {{field.Field_LabelValue}}
    </option>
</select>

如果包含子字符串.，并且在第1和第2下拉列表中仍具有正确的选择，我该如何转换ngModel视图呢？

P.S. getValueBeforeSeparator(condition.get('value').value)返回正确的值，但在第一个下拉列表中未选择任何选项。

Answer 1

请参考角度的级联下拉菜单，关键是定义服务中的所有日期结构并相应地对其进行过滤。

示例级联下拉菜单

https://stackblitz.com/edit/cascading-dropdown-angular-xs3cwn