Angular 5 material，从后端服务器获取垫选项（在 autocomplete/select 列表中）

Question

我正在将应用程序从 AngularJS 升级到 Angular 5. 我已经解决了大部分问题，但仍处于学习过程中，我无法弄清楚将自动完成列表连接到后端的最佳方式。 Material 设计网站也没有提到这一点。

现在的代码如下所示：

  <mat-form-field>

    // chips are up here

    <mat-autocomplete (optionSelected)="chipAdd($event,field)" #auto="matAutocomplete">
      <mat-option [value]="opt.id" *ngFor="let opt of field.options">
        {{ opt.name }}
      </mat-option>
    </mat-autocomplete>

  </mat-form-field>

我已经删除了 mat-chip-list，只包含了相关代码。

所以我的问题是...现在我从 field.options 获得选项 -- 而不是这个，一旦我开始输入，我如何从 http 后端动态加载它们？

感谢您的帮助！ :)

Answer 1

您可以使用响应式表单来实现这一点。这里的文档：https://angular.io/guide/reactive-forms.

表单的值变化可以是一个流。可以根据输入值查询后台

即（在组件ts文件中）：

// define appropriate type for your options, string[] just as an example,
// I don't know what you'll receive from the back-end and use as the option:
public autocompleteOptions$: Observable<string[]>;

constructor(private http: HttpClient) { }

ngOnInit() {
  // If you don't know how to have reactive form and subscribe to value changes,
  // please consult: https://angular.io/guide/reactive-forms#observe-control-changes

  this.autocompleteOptions$ = this.inputFormControl.valueChanges
    // this inputFormControl stands for the autocomplete trigger input   
    .debounceTime(150)
    // well, you probably want some debounce
    .switchMap((searchPhrase: string) => {
    // "replace" input stream into http stream (switchMap) that you'll subscribe in the template with "async" pipe,
    // it will run http request on input value changes
       return this.http.get('/api/yourAutocompleteEndpoint', { search: { 
          value: searchPhrase }}
       });
   }
 }

然后，在您的组件模板中：

<mat-option [value]="opt.id" *ngFor="let opt of autocompleteOptions$ | async">
  {{ opt.name }}
</mat-option>

可能需要一些额外的功能，例如在此流中进行过滤以在字符数太少时不触发自动完成等，但这只是您可以遵循的基本示例。

Angular 5 material，从后端服务器获取垫选项（在 autocomplete/select 列表中）

Angular 5 material, fetch mat-options (in autocomplete/select list) from backend server

angular2-forms

angular-material2

angular

angular4-httpclient