Question

有两个选择，第二个取决于第一个：

<div class="form-group">
        <label class="col-xs-12 col-sm-2 control-label">Тип ТС:</label>
        <div class="col-xs-12 col-sm-10">
            <select class="form-control " type="text" [(ngModel)]="item.TransportTypeId">
                <option *ngFor='let type of transportTypes' [ngValue]='type.Id' [textContent]='type.Name'></option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-12 col-sm-2 control-label">Подтип ТС:</label>
        <div class="col-xs-12 col-sm-10">
            <select class="form-control " type="text" [(ngModel)]="item.TransportSubTypeId" (ngModelChange)="show()">
                <option [ngValue]="undefined">Не указано</option>
                <option *ngFor="let subType of transportSubTypes | filterBy: ['TransportTypeId']: item.TransportTypeId" [ngValue]='subType.Id' [textContent]='subType.Name'></option>
            </select>
        </div>
    </div>

假设第二个select可以为空（未定义）。在初始时，一切正常，select都有值，当第二个ngModelChange发生变化时，它都有效。但是，如果我在第一个select中选择任何值，那么当第二个select的过滤器返回一个空数组时，第二个select会在视觉上被删除为值Not chosen （undefined），但ngModel不等于undefined。

例如：

item.TransportTypeId = 1;
item.TransportSubTypeId = 1;

更改为：

item.TransportTypeId = 2;

filterBy过滤器会返回[]，item.TransportSubType === 1，但会选择值Not chosen并且不会发生ngModelChange事件。

帮我弄清楚如何制作它以便select自动重置模型的值。

Answer 1

您还需要添加组件逻辑以正确理解查询。但是通过查看您的查询，可以按照以下方式更改代码

(ngModelChange)="show($event)" 
//component
show(event) { this.val = event.value; }

Angular 2选择不更改ngModel

1 个答案: