在 Angular 7 中，SELECT 控件如何在没有(更改)的情况下正常工作

Question

我使用以下方法来获取第一个select控件值，并根据该方法在第二个控件select中显示值。

<clr-select-container>
          <select clrSelect #getList1>
            <option value="">Select </option>
            <option *ngFor="let list of dataList" value="{{list.listid}}">{{list.list_name}}</option>
          </select>
        </clr-select-container>
        <div class="clr-row">
          <div class="clr-col-5">
            <h5>Select Segment</h5>
            <select class="form-control " multiple="true" name="segment_list" id="segment_list"
              data-parsley-group="block-1">
              <option *ngFor="let segment of segments | conditionFilter:getList1.value" value="{{segment.segmentid}}">
                {{segment.segment_name}}
              </option>
            </select>
          </div>
</div>

一切正常，但问题是当我从第一个选择控制系统中选择不同的值时，没有收到任何更改事件，然后什么也没发生，但是当我单击页面正文(模糊时(时，第二个选择控件中填充的值。

如何设置其行为以使其正常工作？

当我添加(change)="someFunction()"时，它工作正常，但我不想在函数中执行任何操作，所以我认为这不是好的做法。

Answer 1

这里的例子。抱歉，我不知道如何为堆栈闪电战放置漂亮的网址

https://stackblitz.com/edit/angular-wbsvk6

Answer 2

您可以在 ngModel 的 Angular 上使用双向绑定。直到clrSelect的文档，它支持ngModel表示法。你也可以在StackBlitz上查看这个例子的基本示例，所以它应该像那样工作。

<clr-select-container>
  <select [(ngModel)] = "select1Value" clrSelect #getList1>
    <option value="">Select </option>
    <option *ngFor="let list of dataList" value="{{list.listid}}">{{list.list_name}}</option>
  </select>
</clr-select-container>
<div class="clr-row">
  <div class="clr-col-5">
    <h5>Select Segment</h5>
    <select class="form-control " multiple="true" name="segment_list" id="segment_list"
      data-parsley-group="block-1">
      <option *ngFor="let segment of segments | conditionFilter:select1Value" value="{{segment.segmentid}}">
        {{segment.segment_name}}
      </option>
    </select>
  </div>
</div>

不要忘记从组件中将变量声明为 select1Value。

select1Value = null;

另外，如果您没有，请不要忘记将 FormsModule 从 @angular/Forms 包含在您的 module.ts 中。