Angular mat chips with auto complete not working.

huangapple
go评论102阅读模式
英文:

Angular mat chips with auto complete not working

问题

我想在我的Angular项目中实现matAutoComplete功能。
我查看了一些参考资料 https://stackblitz.com/edit/mat-chips-angularmaterial?file=package.json

但是我没有找到任何关于autoComplete的选项。

//component.html




{{fruit}}
cancel





{{fruit}}


  1. {{fruits|json}}

//component.ts

export class ChipsOverviewExample {
visible = true;
selectable = true;
removable = true;
addOnBlur = false;
separatorKeysCodes: number[] = [ENTER, COMMA];
fruitCtrl = new FormControl();
filteredFruits: Observable<string[]>;
fruits: string[] = [];
allFruits: any= ['hi','hello','apple'];

@ViewChild('fruitInput') fruitInput: ElementRef;

constructor() {
this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
startWith(null),
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
console.log(this.filteredFruits)
}

add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;

  1. // Add our fruit
  2. if ((value || '').trim()) {
  3.   this.fruits.push(value.trim());
  4. }
  6. // Reset the input value
  7. if (input) {
  8.   input.value = '';
  9. }
  11. this.fruitCtrl.setValue(null);

}

remove(fruit: string): void {
const index = this.fruits.indexOf(fruit);

  1. if (index >= 0) {
  2.   this.fruits.splice(index, 1);
  3. }

}

selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push(event.option.viewValue);
this.fruitInput.nativeElement.value = '';
this.fruitCtrl.setValue(null);
}

private _filter(value: string): string[] {
const filterValue = value.toLowerCase();

  1. return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);

}
}

即使我已经在app.module.ts中导入了MatAutocompleteModule包。

英文:

i want to implement the matAutoComplete in my angular project
i gone through some references
https://stackblitz.com/edit/mat-chips-angularmaterial?file=package.json

but i didn't get any options for autoComplete.

//component.html

  1. &lt;mat-form-field class=&quot;example-chip-list&quot;&gt;
  2.   &lt;mat-chip-list #chipList&gt;
  3.     &lt;mat-chip
  4.       *ngFor=&quot;let fruit of fruits&quot;
  5.       [selectable]=&quot;selectable&quot;
  6.       [removable]=&quot;removable&quot;
  7.       (removed)=&quot;remove(fruit)&quot;&gt;
  8.       {{fruit}}
  9.       &lt;mat-icon matChipRemove *ngIf=&quot;removable&quot;&gt;cancel&lt;/mat-icon&gt;
  10.     &lt;/mat-chip&gt;
  11.     &lt;input
  12.       placeholder=&quot;New fruit...&quot;
  13.       #fruitInput
  14.       [formControl]=&quot;fruitCtrl&quot;
  15.       [matAutocomplete]=&quot;auto&quot;
  16.       [matChipInputFor]=&quot;chipList&quot;
  17.       [matChipInputSeparatorKeyCodes]=&quot;separatorKeysCodes&quot;
  18.       [matChipInputAddOnBlur]=&quot;addOnBlur&quot;
  19.       (matChipInputTokenEnd)=&quot;add($event)&quot;&gt;
  20.   &lt;/mat-chip-list&gt;
  21.   &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot; (optionSelected)=&quot;selected($event)&quot;&gt;
  22.     &lt;mat-option *ngFor=&quot;let fruit of filteredFruits | async&quot; [value]=&quot;fruit&quot;&gt;
  23.       {{fruit}}
  24.     &lt;/mat-option&gt;
  25.   &lt;/mat-autocomplete&gt;
  26. &lt;/mat-form-field&gt;
  29. &lt;pre&gt;{{fruits|json}}&lt;/pre&gt;

//component.ts

  1. export class ChipsOverviewExample {
  2. visible = true;
  3.   selectable = true;
  4.   removable = true;
  5.   addOnBlur = false;
  6.   separatorKeysCodes: number[] = [ENTER, COMMA];
  7.   fruitCtrl = new FormControl();
  8.   filteredFruits: Observable&lt;string[]&gt;;
  9.   fruits: string[] = [];
  10.   allFruits: any= [&#39;hi&#39;,&#39;hello&#39;,&#39;apple&#39;];
  12.   @ViewChild(&#39;fruitInput&#39;) fruitInput: ElementRef;
  14.   constructor() {
  15.     this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
  16.         startWith(null),
  17.         map((fruit: string | null) =&gt; fruit ? this._filter(fruit) : this.allFruits.slice()));
  18.         console.log(this.filteredFruits)
  19.   }
  21.   add(event: MatChipInputEvent): void {
  22.     const input = event.input;
  23.     const value = event.value;
  25.     // Add our fruit
  26.     if ((value || &#39;&#39;).trim()) {
  27.       this.fruits.push(value.trim());
  28.     }
  30.     // Reset the input value
  31.     if (input) {
  32.       input.value = &#39;&#39;;
  33.     }
  35.     this.fruitCtrl.setValue(null);
  36.   }
  38.   remove(fruit: string): void {
  39.     const index = this.fruits.indexOf(fruit);
  41.     if (index &gt;= 0) {
  42.       this.fruits.splice(index, 1);
  43.     }
  44.   }
  46.   selected(event: MatAutocompleteSelectedEvent): void {
  47.     this.fruits.push(event.option.viewValue);
  48.     this.fruitInput.nativeElement.value = &#39;&#39;;
  49.     this.fruitCtrl.setValue(null);
  50.   }
  52.   private _filter(value: string): string[] {        
  53.     const filterValue = value.toLowerCase();
  55.     return this.allFruits.filter(fruit =&gt; fruit.toLowerCase().indexOf(filterValue) === 0);
  56.   }
  57. }

even i already imported the MatAutocompleteModule package in app.module.ts

答案1

得分: 2

请尝试以下方式：

.ts

  1. constructor() {
  2.   this.fruitCtrl.valueChanges.subscribe(search => {
  3.     this.filteredFruits = of(this.allFruits.filter(item =>
  4.       item.name.toLowerCase().includes(search)
  5.     ));
  6.   });
  7. }

.html

  1. <mat-form-field class="example-chip-list">
  2.   <mat-chip-list #chipList>
  3.     <mat-chip
  4.       *ngFor="let fruit of fruits"
  5.       [selectable]="selectable"
  6.       [removable]="removable"
  7.       (removed)="remove(fruit)">
  8.       {{fruit}}
  9.       <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  10.     </mat-chip>
  11.     <input
  12.       placeholder="New fruit..."
  13.       #fruitInput
  14.       [formControl]="fruitCtrl"
  15.       [matAutocomplete]="auto"
  16.       [matChipInputFor]="chipList"
  17.       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
  18.       [matChipInputAddOnBlur]="addOnBlur"
  19.       (matChipInputTokenEnd)="add($event)">
  20.   </mat-chip-list>
  21.   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
  22.     <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
  23.       {{fruit.name}}
  24.     </mat-option>
  25.   </mat-autocomplete>
  26. </mat-form-field>
  28. <pre>{{fruits|json}}</pre>

演示链接

英文:

Try like this:

.ts

  1.  constructor() {
  2.     this.fruitCtrl.valueChanges.subscribe(search =&gt; {
  3.       this.filteredFruits = of(this.allFruits.filter(item =&gt;
  4.         item.name.toLowerCase().includes(search)
  5.       ));
  6.     });
  7.   }

.html

  1. &lt;mat-form-field class=&quot;example-chip-list&quot;&gt;
  2.   &lt;mat-chip-list #chipList&gt;
  3.     &lt;mat-chip
  4.       *ngFor=&quot;let fruit of fruits&quot;
  5.       [selectable]=&quot;selectable&quot;
  6.       [removable]=&quot;removable&quot;
  7.       (removed)=&quot;remove(fruit)&quot;&gt;
  8.       {{fruit}}
  9.       &lt;mat-icon matChipRemove *ngIf=&quot;removable&quot;&gt;cancel&lt;/mat-icon&gt;
  10.     &lt;/mat-chip&gt;
  11.     &lt;input
  12.       placeholder=&quot;New fruit...&quot;
  13.       #fruitInput
  14.       [formControl]=&quot;fruitCtrl&quot;
  15.       [matAutocomplete]=&quot;auto&quot;
  16.       [matChipInputFor]=&quot;chipList&quot;
  17.       [matChipInputSeparatorKeyCodes]=&quot;separatorKeysCodes&quot;
  18.       [matChipInputAddOnBlur]=&quot;addOnBlur&quot;
  19.       (matChipInputTokenEnd)=&quot;add($event)&quot;&gt;
  20.   &lt;/mat-chip-list&gt;
  21.   &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot; (optionSelected)=&quot;selected($event)&quot;&gt;
  22.     &lt;mat-option *ngFor=&quot;let fruit of filteredFruits | async&quot; [value]=&quot;fruit&quot;&gt;
  23.       {{fruit.name}}
  24.     &lt;/mat-option&gt;
  25.   &lt;/mat-autocomplete&gt;
  26. &lt;/mat-form-field&gt;
  29. &lt;pre&gt;{{fruits|json}}&lt;/pre&gt;

Working Demo

答案2

得分: 1

HTML更改

  1. <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
  2.   {{fruit.name}}
  3. </mat-option>

TYPESCRIPT更改

  1. private _filter(value: string): string[] {
  2.   const filterValue = value['name'] ? value['name'].toLowerCase() : value.toLowerCase();
  4.   return this.allFruits.filter((fruit) => new RegExp(value, 'gi').test(fruit['name']));
  5. }
英文:

[Answer updated to fix second search list]

HTMl CHANGES

  1. &lt;mat-option *ngFor=&quot;let fruit of filteredFruits | async&quot; [value]=&quot;fruit&quot;&gt;
  2.   {{fruit.name}}
  3. &lt;/mat-option&gt;

TYPESCRIPT CHANGES

  1. private _filter(value: string): string[] {
  2.   const filterValue = value[&#39;name&#39;] ?  value[&#39;name&#39;].toLowerCase() : value.toLowerCase();
  4.   return this.allFruits.filter((fruit) =&gt; new RegExp(value, &#39;gi&#39;).test(fruit[&#39;name&#39;]));
  5. }

huangapple
  • 本文由 发表于 2020年1月3日 19:44:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/59578046.html
  • angular
  • mat-autocomplete
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定