Angular 2选择不更改ngModel

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在视觉ngModel被丢弃为值Not chosen ngModel （ undefined ），但是ngModel不等于undefined 。

例如：

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

改成：

item.TransportTypeId = 2;

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

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

Answer 1

您还需要添加组件逻辑以正确理解查询。 但是通过查找查询来更改代码，如下所示

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