как добавить выбор мата во вход Angular - PullRequest
Новая
       69

как добавить выбор мата во вход Angular

1 голос
/ 16 июня 2020

Я пытаюсь добавить выделение коврика в поле ввода, но по какой-то причине, когда я нажимаю на стрелку, он не работает и не показывает мне весь список.

У меня есть автозаполнение, и обычно пользователь начинает вводить его, показывает весь список для выбора, но я также пытаюсь добавить mat-select, чтобы пользователь мог просто щелкнуть стрелку и выбрать из списка, не вводя что-то сначала.

Я следуя ниже примеру stackblitz (флажок не нужен для моего), но мой немного отличается, и у меня также есть ввод текста и автозаполнение, поэтому я не уверен, почему я больше не могу вводить свой ввод с текущим кодом, а также отбрасывать список вниз не отображается, когда я нажимаю стрелку.

любые предложения или помощь будут действительно приняты.

https://stackblitz.com/edit/angular-material-v9-mat-select-with-mat-chip-list?file=src%2Fapp%2Fselect-multiple-example.html

    <mat-form-field class="form" appearance="fill">
        <mat-label>Search or Select a Super Tag</mat-label>

        <mat-select [formControl]="superTags" multiple>
            <mat-select-trigger>
                <mat-chip-list #chipList>
                    <div>
                        <mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
                            (removed)="remove(superTag)">
                            <img class="super-icon" src="/assets/images/icons/super-tag-icon.svg">
                            {{superTag.tag}}
                            <mat-icon matChipRemove *ngIf="removable" matTooltip="Remove a super tag">cancel</mat-icon>
                        </mat-chip>
                    </div>
                    <div>
                        <input matInput  #input [(ngModel)]="tagIn" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag()">

                    </div>
                </mat-chip-list>
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                    <mat-option *ngIf="isLoading" class="is-Loading">
                        <mat-spinner diameter="20"></mat-spinner>
                    </mat-option>
                    <ng-container *ngIf="!isLoading">
                        <mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
                            {{tag}}
                        </mat-option>
                    </ng-container>
                </mat-autocomplete>
            </mat-select-trigger>
        </mat-select>
    </mat-form-field>

enter image description here

1 Ответ

0 голосов
/ 16 июня 2020

В этом случае я бы не использовал комбинацию списка микросхем и автозаполнения.

Думаю, что вам действительно нужно, так это автозаполнение с опциями, которые содержат флажки для множественного выбора. Попробуйте сделать что-нибудь вроде этого. 

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Select Users" aria-label="Select Users" matInput [matAutocomplete]="auto" [formControl]="userControl">
  <mat-hint>Enter text to find users by name</mat-hint>
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let user of filteredUsers | async" [value]="selectedUsers">
        <div (click)="optionClicked($event, user)">
            <mat-checkbox [checked]="user.selected" (change)="toggleSelection(user)" (click)="$event.stopPropagation()">
                {{ user.firstname }} {{ user.lastname }}
            </mat-checkbox>
        </div>
    </mat-option>
</mat-autocomplete>

Полный пример:

https://stackblitz.com/edit/angular-sx79hu?embed=1&file=app / multiselect-autocomplete-example. html

...