Question

我有一个大约4k项目的列表，我希望自动完成输入搜索到低谷。因为在构造函数中获取它们并在角度应用程序中过滤它们（这里有一些答案），我真的不那么实际，我想在服务器上进行搜索并将数据返回给组件。

我对代码的外观有点迷失，但这是我的尝试：

HTML

<mat-form-field class="w-100">
    <input #searchInput [matAutocomplete]="searchOptions" formControlName="search" matInput placeholder="Search"/>
</mat-form-field>
<mat-autocomplete #searchOptions="matAutocomplete">
    <mat-option *ngFor="let item of items | async" [value]="item.id">
        {{ item.description }}
    </mat-option>
</mat-autocomplete>

打字稿

export class SearchDialogComponent {

    myForm: FormGroup;
    items: any;

    constructor(public formBuilder: FormBuilder,
        public itemService: ItemService,
        public dialogRef: MatDialogRef<SearchDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any) {
            this.createForm();
    }

    ngOnInit(): void {
        this.items = this.myForm.get('search').valueChanges.map(q => this.searchFilter(q));
    }

    createForm() {
        this.myForm = this.formBuilder.group({
            search: new FormControl(''),
        });
    }

    searchFilter(q: string) {
        this.itemService.fullSearch(q).subscribe(result => {
            return result;   // This won't work, but I have no idea what will :) 
        });
    }
}

Answer 1

哦！然后有两件事：

使用flatMap()运算符并执行搜索服务调用;
不要订阅该可观察对象，因为您正在使用async管道。

我假设itemService.fullSearch()返回Observable<T[]>，其中T是结果类型。

P.S。如果原始代码中没有any，则此问题会缩短时间;并且searchFilter方法的签名声明了返回类型。 TypeScript就是让JavaScript至少有点类型更安全。

this.items = this.myForm
  .get('search')
  .valueChanges
  .flatMap(searchQuery => this.itemService.fullSearch(searchQuery));

使用Angular Material 2进行远程搜索

1 个答案: