我正在使用带有角材料芯片的 ngx-material-keyboard,但问题是我单击的字母未显示在输入中。但是,当我从输入中删除 [matAutocomplete]="auto" 时,键盘工作正常。(也对不起我的英语不好)这是我的 HTML 代码
<mat-form-field class="w-100 mt-4" appearance="outline">
<mat-chip-list #chipList aria-label="Recipient selection">
<mat-chip
*ngFor="let user of _selectedUsers"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(user)"
>
{{ user.firstname + ' ' + user.lastname }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
[matAutocomplete]="auto"
[disabled]="_selectedUsers.length > 0"
[placeholder]="
'ORGANIZATION.USERS.INVITE.searchplaceholder' | translate
"
#usersInput
[formControl]="useCtr"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(keyup)="onKeyUp()"
(input)="onKeyUp()"
(ngModelChange)="onKeyUp()"
/>
<mat-icon
(click)="clickKeyboard()"
class="matIcon center"
style="cursor: pointer"
[ngClass]="_selectedUsers.length > 0 ? 'iconDisabled' : ''"
>keyboard</mat-icon
>
<div
[ngClass]="spinnerIsShow ? 'd-block' : 'd-none'"
class="spinner-border"
role="status"
>
<span class="sr-only">Loading...</span>
</div>
</mat-chip-list>
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="selected($event)"
>
<mat-option
*ngFor="let filteredUser of filtredUsers"
[value]="filteredUser.id"
[ngClass]="emptyList ? 'd-none' : 'd-block'"
>
<div class="d-flex align-items-center">
<div class="mr-3">
<img
*ngIf="filteredUser.picture; else NoPic"
class="pic"
style="width: 40px; height: 40px"
src="{{ filteredUser.picture }}"
alt="photo"
/>
<ng-template #NoPic>
<span
class="
no-pic
bg-light-success
text-success
font-weight-bold font-size-h6
"
>
{{
filteredUser.firstname.charAt(0).toUpperCase() +
'' +
filteredUser.lastname.charAt(0).toUpperCase()
}}
</span>
</ng-template>
</div>
<div class="d-flex flex-column">
<span
appHighlight
[searchedWord]="useCtr.value"
[content]="
filteredUser.firstname + ' ' + filteredUser.lastname
"
[classToApply]="'font-weight-bold'"
>
</span>
</div>
</div>
</mat-option>
</mat-autocomplete>
</mat-form-field>
这就是我将键盘链接到输入的方式
clickKeyboard() {
if (this.count % 2 === 0) {
this._keyboardRef = this._keyboardService.open('ar', {
darkTheme: true,
duration: 0,
isDebug: false
});
this._keyboardRef.instance.setInputInstance(this.usersInput);
this._keyboardRef.instance.attachControl(this.useCtr as AbstractControl);
this.count++;
} else {
this._keyboardService.dismiss();
this.count++;
}
}
请帮助我,因为我真的需要同时使用它们。谢谢你的帮助。