Question

我有一个Mat自动完成指令，用于动态生成的输入表单，如下所示：

<mat-list *ngFor="let key of keysList" style="padding-top:0px;">
    <mat-list-item class="editor-list" *ngIf="ifKeyIgnored(key) == false" style="height: 36px;">
    <div class="concept-list-block key-block">{{key}} </div>
    <div class="concept-list-block value-block" style="width:600px !important;">
        <mat-form-field style="width: 550px;">
            <input (focusout)="filteredLookupList=[]" [matAutocomplete]="auto" matInput [(ngModel)]="dataObject[key]" (ngModelChange)="filteredLookupList = setupAutoCompleteData(key, 1)">
                </mat-form-field>
              </div>
            </mat-list-item>
          </mat-list>
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let val of filteredLookupList" [value]="val.code">
              <span>{{val.code}}</span> |
              <small>Narrative: {{val.narrative}}</small>
            </mat-option>
          </mat-autocomplete>

我的setupAutoCompleteData的TS是

setupAutoCompleteData = function(key, num){             
            let searchValue = this.dataObj[key] != null ? ""+this.dataObject[key] : "";
            let searchKey = "dataObj."+key
            this.currentLookupKey = key;
            this.currentLookup = JSON.parse(localStorage.getItem("lookups"))[searchKey]; //this returns an array from an object of lookup values                
            return this.currentLookup.filter(vals => {
                return vals.code.toLowerCase().includes(searchValue.toLowerCase())
            });                             


}

这很好用，但问题是在编辑一个输入并移至另一个输入后，自动完成下拉列表仍显示第一个过滤器列表中的值，直到我开始在新的输入框中键入内容为止。我该怎么做才能解决此问题？

Mat自动完成功能会在动态表单上显示旧值

0 个答案: