Question

每当用户开始搜索将调用http服务并获得响应并将其显示在下拉列表中的内容时，我都会遇到这种情况。

我有以下代码，可以很好地与上述方法配合使用。但是，在我们单击下拉列表中列出的任何选项之后，将再次调用ngmodelchange方法来再次获取服务。它不应该发生。

我在哪里失踪？

<mat-form-field class="half-width">
            <input matInput aria-label="State" name="state" placeholder="Search by number (1 or 2 or 3)" [matAutocomplete]="auto" [(ngModel)]="currentState"
              (ngModelChange) = "filterInstrument(currentState)">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="state">
                <mat-option *ngFor="let state of insDetails" [value]="state.id">
                  <span>{{state.id}}</span> |
                  <span>{{state.userId}}</span> |
                  <span>{{state.title}}</span>                 
                </mat-option>
            </mat-autocomplete>
          </mat-form-field>

还有没有可能显示下拉列表中所示的选定值（以竖线分隔）？当前，id属性仅显示在所选值中。

stackblitz中的完整代码

有帮助吗？

Answer 1

要在输入中显示当前选定的选项，请单击添加至mat-option：

<mat-option *ngFor="let state of insDetails" [value]="state.id" (click) ="valueGet(state)">
     <span >{{state.id}}</span> |
     <span>{{state.userId}}</span> |
     <span>{{state.title}}</span>                 
</mat-option>

在select-multiple-example.ts中：

valueGet(state) {
   this.currentState = `${state.id} ${state.title} ${state.userId}`;
}

ngmodelchange在角度为6的材质中调用了两次

1 个答案: