Автозаполнение угловых фишек материала: невозможно выбрать элемент после фильтрации - PullRequest
Новая
       5

Автозаполнение угловых фишек материала: невозможно выбрать элемент после фильтрации

0 голосов
/ 26 октября 2019

Я использую угловой материал автозаполнения чипов. Когда я ввожу букву, например, 's' во ввод, и фильтрация работает нормально, и мне показываются необходимые опции, но если я нажимаю на любую из предложенных опций, выбранный чип не будет добавлен, но методдля добавления новых фишек будет работать и будет добавлено значение 's', несуществующее значение, на которое я нажал 


this.dataService.getAllArticlesTags$()
                    .subscribe(tags => {
                        this.availableArticleTags = tags;
                        this.selectedArticleTags = this.availableArticleTags.filter(tag => {
                            return this.article.tagIds.includes(tag.id);
                        });
                        this.filteredTags = this.tagCtrl.valueChanges.pipe(
                            startWith(null),
                            map((tag: string | null) => {
                                return tag ? this.filter(tag) : this.availableArticleTags;
                            }));
                        this.changeDetection.markForCheck();
                    });
            });

public addNewArticleTag(event: MatChipInputEvent): void {
        const input: HTMLInputElement = event.input;
        const value: string = event.value;
        const tagId: string = value.toLowerCase().split(' ').join('-');
        if ((value || '').trim()) {
            this.dataService.addArticleTag({value, id: tagId});
                      this.articleFormGroup.controls.tagIds.value.push(tagId);
        }
        input.value = '';
        this.tagCtrl.setValue(null);
    }

    public setTagsToArticleForm(): void {
        const selectedArticleTagId: string[] = this.selectedArticleTags
            .map(tag => tag.id);
        this.articleFormGroup.controls.tagIds.setValue(selectedArticleTagId);

    }

    public removeArticleTag(tag: ALArticleTag): void {
        const index: number = this.selectedArticleTags.indexOf(tag);
        if (index >= 0) {
            this.selectedArticleTags.splice(index, 1);
        }
        this.setTagsToArticleForm();
    }

    public onArticleTagClick(event: MatAutocompleteSelectedEvent): void {
        this.selectedArticleTags.push({
            value: event.option.viewValue,
            id: event.option.viewValue.toLowerCase().split(' ').join('-'),
        });
        this.setTagsToArticleForm();

        this.tagInput.nativeElement.value = '';
        this.tagCtrl.setValue(null);
    }

    private filter(value: string | null): ALArticleTag[] {
        const filterValue: string = value.toLowerCase();
        return this.availableArticleTags
            .filter(tag => tag.value.toLowerCase().indexOf(filterValue) === 0);
    }



<mat-form-field>
            <mat-chip-list
                #chipList
                formControlName="tagIds"
            >
                <mat-chip
                    *ngFor="let tag of selectedArticleTags"
                    [selectable]="true"
                    [removable]="true"
                    (removed)="removeArticleTag(tag)"
                >
                    {{tag.value}}
                    <mat-icon matChipRemove>cancel</mat-icon>
                </mat-chip>
                <input
                    #tagInput
                    [placeholder]="'BLOG_PAGE.TAGS' | translate"
                    [formControl]="tagCtrl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="matChipInputSeparatorKeyCodes"
                    [matChipInputAddOnBlur]="true"
                    (matChipInputTokenEnd)="addNewArticleTag($event)"
                >
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onArticleTagClick($event)">
                <mat-option *ngFor="let tag of filteredTags | async" [value]="tag.id">
                    {{tag.value}}
                </mat-option>
            </mat-autocomplete>
...