node.js - Angular 5 : How can I further filter my data down based upon the valueChanges event

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>

小发明.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) 中添加/删除选定的 gizmos

我已经通读了 Angular Material 示例，但我似乎无法在我的代码中使用自动完成功能。

我已经在构造函数中试过了:

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) 因为它将异步运行。

我认为当您将数据服务中的值分配给变量并过滤该变量时，这可以解决，例如:

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