Angular material Chips Autocomplete-Toy模板网

这篇具有很好参考价值的文章主要介绍了Angular material Chips Autocomplete。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Chips Autocomplete 官网的例子我没法正常使用，无法实现搜索

我的select是个通用组件，现在贴代码：
component.ts

import {
  Component,
  ElementRef,
  forwardRef,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import { Tag } from '../../models/tag/tag';
import { map, startWith, takeUntil } from 'rxjs/operators';
import { ControlValueAccessor, UntypedFormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
// import { MatChipInputEvent } from '@angular/material/chips';
import { TagService } from '../../services/tag/tag.service';
import { TagType } from '../../enums/TagType';
import { ISearchOptions } from '../../interfaces/SearchOptions';
import { SubscriberWrapperComponent } from '../subscriber-wrapper/subscriber-wrapper.component';

@Component({
  selector: 'app-tags-select',
  templateUrl: './tags-select.component.html',
  styleUrls: ['./tags-select.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TagsSelectComponent),
      multi: true,
    },
  ],
})
export class TagsSelectComponent
  extends SubscriberWrapperComponent
  implements ControlValueAccessor, OnChanges, OnInit, OnDestroy
{
  @Input() title: string;
  @Input() disabled: boolean;
  @Input() color: 'primary' | 'accent' | 'warn';
  @Input() type: TagType;
  @Input() tags: Tag[];

  filteredTags: Tag[];
  selectedTags: Tag[] = [];
  separatorKeysCodes: number[] = [ENTER, COMMA];
  tagCtrl = new UntypedFormControl('');
  hideComponent: boolean;

  @ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
  @ViewChild('chipList') chipList: ElementRef;

  constructor(private tagService: TagService) {
    super();
  }

  onChange = (_: any) => {};
  onTouched = () => {};

  async ngOnInit() {
    this.initTags();
    const conditions = [];
    if (this.type) {
      conditions.push({
        key: 'type',
        value: this.type,
        operator: '=',
      });
    }
    this.tags = await this.listTags('', {
      conditions,
    });
    await this.updateFilterTags();
  }

  async listTags(query: string = '', options: ISearchOptions = {}) {
    if (!this.tags) {
      const response = await this.tagService.list(query, options);
      return response.entities;
    } else {
      return this.tags;
    }
  }

  // add(event: MatChipInputEvent): void {
  //   event.chipInput!.clear();

  //   this.tagCtrl.setValue(null);
  // }

  remove(tag: Tag): void {
    const index = this.selectedTags.indexOf(tag);
    if (index >= 0) {
      this.selectedTags.splice(index, 1);
    }
    this.filteredTags.push(tag);
    // this.onChange(this.selectedTags);  
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.selectedTags.push(event.option.value);
    this.tagInput.nativeElement.value = '';
    this.tagCtrl.setValue(null);
    // this.onChange(this.selectedTags);
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  writeValue(selectedTags: Tag[] = []): void {
    this.selectedTags = selectedTags ?? [];
    this.updateFilterTags();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.disabled?.currentValue) {
      this.tagCtrl.disable();
    }

    if (changes.tags?.currentValue) {
      this.updateFilterTags();
    }
  }

  initTags() {
    this.tagCtrl.valueChanges
      .pipe(
        takeUntil(this.unsubscribeAll),
        startWith(null),
        map(async (value?: string) => {
          await this.updateFilterTags(value);
        })
      )
      .subscribe();
  }

  async updateFilterTags(value?: string) {
    const conditions = [];
    if (this.type) {
      conditions.push({
        key: 'type',
        value: this.type,
        operator: '=',
      });
    }
    const response = value
    ? this.tags?.filter((tag: Tag) => {
        const regex = new RegExp(`^${value}`, 'i'); 
        return regex.test(tag.title?tag.title:'');
      }) || []
    : this.tags?.slice() || [];
    
    const selectedTagIds = this.selectedTags.map((tag: Tag) => tag.id);
    this.filteredTags = response.filter((tag: Tag) => !selectedTagIds.includes(tag.id));
  }
}

页面.html
文章来源地址https://www.toymoban.com/news/detail-757807.html

<mat-label>{{title}}</mat-label>
<mat-form-field class="tag-chip-list" *ngIf="!hideComponent">
  <mat-chip-list #chipList aria-label="Tag selection" [disabled]="disabled">
    <mat-chip [color]="color" [class]="color"
              *ngFor="let tag of selectedTags; let i=index"
              (removed)="remove(tag)">
      <button matChipRemove>
        <mat-icon svgIcon="CloseBlue" class="close-icon"></mat-icon>
      </button>
      {{tag.name}}
    </mat-chip>
    <input
      placeholder="Add another tag..."
      #tagInput
      [formControl]="tagCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete"
                    (optionSelected)="selected($event)">
    <mat-option *ngFor="let tag of filteredTags" [value]="tag"
                [innerHTML]="tag.name">

    </mat-option>
  </mat-autocomplete>
</mat-form-field>

到了这里，关于Angular material Chips Autocomplete的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！