angular - ngx-material-keyboard with mat-chips

Question

我正在使用带有角材料芯片的 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++;
}

}

请帮助我，因为我真的需要同时使用它们。谢谢你的帮助。

标签： angulartypescriptangular-materialmat-chip