Angular 5: Как я могу дополнительно отфильтровать мои данные на основе события valueChanges

Question

Моя конечная цель - заставить автозаполнение работать, но мой вопрос:Как я могу дополнительно отфильтровать свои данные на основе события valueChanges?

Я ищу не только правильный код, но и объяснение того, как это сделать.Так как это моя первая попытка кодирования Angular / React.

В настоящее время у меня есть следующий код.

gizmo.html

<mat-form-field>
    <input matInput placeholder="Add Gizmo"
           #addGizmo
           [formControl]="gizmoControl"
           [matAutocomplete]="auto"
           [matChipInputFor] ="gizmoChipList"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="addGizmo($event)"
           />
  </mat-form-field>
  <mat-form-field>
    <mat-chip-list #tagChipList>
      <mat-chip *ngFor="let gimzo of data.gizmos"
                [selectable]="isSelectable"
                color="accent"
                [removable]="isRemovable" (removed)="removeGizmo(gizmo)">{{tag}}
        <mat-icon matChipRemove *ngIf="isRemovable">cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>
  </mat-form-field>

  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let gizmo of filterGizmos | async" [value]="gizmo">
      {{gizmo.value}}
    </mat-option>
  </mat-autocomplete>

gizmo.ts

gizmoControl = new FormControl();
private filterGizmos: Observable<Gizmo[]>;

filterGizmoData(): Observable<Gizmo[]> {
         return this.dataService.findGizmos(new GizmoParameters()).map(x => x.filter(y => this.data.gizmos.includes(y.value)));
};

addGizmo(event: MatChipInputElement){
// Logic to add item
this.filterGizmos = this.filterGizmoData();
};

deleteGizmo(item: string){
  //Logic to remove item 
  this.filterGizmos = this.filterGizmoData();
};

ngOnInit() {    
this.dataService.getGizmo(this.gizmoId)     
  .subscribe(x => {
    // Logic to load data for view...

    this.filterGizmos = this.filterGizmoData();
  });


this.filterGizmos = this.gizmoControl.valueChanges.pipe(map(x => this.filter(x)));

}

У меня есть список чипов (data.Gizmos), показывающий, какиеgimzos пользователь уже выбрал.

На входе пользователь может выбрать гизмо для добавления, и пользователь может удалить гизмо из списка чипов.Когда это происходит, я обязательно добавляю / удаляю выбранные вещицы из доступных опций (filterGizmos)

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

Я пробовал это в конструкторе:

this.filterGizmos = this.gizmoControl.valueChanges.pipe(
  startWith(null),
  map((name: string | null) => name ? this.filter(name) : this.filterGizmos));

Однако я получаю ошибку:

The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<{}>'.    

Answer 1

Я думаю, что автозаполнение не работает, потому что this.filterGizmo будет перезаписано с this.filterGizmoData();.

Есть вероятность, что код this.filterGizmos = this.gizmoControl.valueChanges.pipe(map(x => this.filter(x))); может быть запущен до подписки в this.dataService.getGizmo(this.gizmoId), потому что он будет работать асинхронно,

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

myGizmos: any[]; 
ngOnInit() {
  this.dataService.getGizmo(this.gizmoId).subscribe(data => {
    this.myGizmos = data;
    this.filterGizmos = this.gizmoControl.valueChanges.pipe(map(x => this.filter(x)));
  });
}

Пожалуйста, посмотрите также пример на stackblitz: https://stackblitz.com/edit/angular-xqqvek