0

现在，当值发生更改时，matAutocomplete 正在工作。当用户单击自动完成输入字段中的光标时，我必须限制 matautocomplete 中的过滤操作。对我来说，当用户单击 matInput 字段时，它应该列出带有所选选项而不是过滤值的整个列表。我尝试同时实现 matselect 和 matAutocomplete 的功能。

它应该只过滤，当用户通过输入查询来搜索选项时。当用户单击输入字段时，它不应该进行过滤。

1）当用户在自动完成字段中键入字符串时，它应该搜索或过滤列表。2）它也应该具有mat-select的功能。

提前致谢。

ts 代码片段

this.currencySubs = this.currencyService.loadCurrency('en').subscribe(currency => {
    if(currency.responseCode == "0"){
    this.currencyList = currency.currencyList;

    thi.filteredCurrency = this.currencyForm.controls['currency'].valueChanges
    .pipe(
        startWith(''),
        map(cur => typeof cur === 'string' ? cur : ''),
        map(cur => cur ? this._filterCur(cur):this.currencyList.slice())

        );

    }else{
        console.log('Error in response');
    }
}
);

html代码片段

<mat-form-field class="currency" appearance="outline">
    <div class="autoSearch">
        <i class="fa fa-search" aria-hidden="true"></i>
        <input #curInp type="text" matInput  fromControlName="currency" id="currency" [matAutocomplete]="curauto" />
    </div>
    <mat-autocomplete #curauto="matAutocomplete" [displayWith]="displayCurrency">
        <mat-option #curoption *ngFor="let currency  of filteredCurrency | async " [value] ="currency">
            {{currency }}
        </mat-option>
    </mat-autocomplete>

</mat-form-field>
4

0 回答 0