autocomplete - Angular 6 Material Autocomplete 选择错误

Question

我是前端开发的新手。我在我的项目中使用 Angular 6，我想实现一个预先输入/自动完成，它将使用服务从后端获取结果。我能够获得入围结果（基于用户在输入框中提供的文本），但是，一旦this.docControl.valueChanges再次调用选择，就会导致错误。我的组件名为 DocumentSearch，如下所示：

export class DocumentSearchComponent implements OnInit {
  docControl = new FormControl('');
  searchText: string;
  filteredOptions$: Observable<Document[]>;
  isLoading: boolean;

  @Output() documentSelected = new EventEmitter<Document>();

  constructor(private _documentService: DocumentService) { }

  ngOnInit() {
    this.filteredOptions$ = this.docControl.valueChanges
      .pipe(
        startWith(''),
        debounceTime(400),
        tap((text: string) => { this.isLoading = true; this.searchText = text; }),
        switchMap((text: string) => this.searchText ? this._documentService
          .getAllMatchingDocument(this.searchText.toLowerCase())
          .pipe(
            finalize(() => this.isLoading = false),
          ) : of([])
        )
      )
    ;
  } 

  public myChangeFunc(event, doc: Document) {
    if (event.source.selected) {
      this.documentSelected.emit(doc);
      this.searchText = doc.documentTitle;
    }
  }

  displayFn(doc?: Document): string | undefined {
     return doc ? doc.documentTitle : undefined;
  }

}

Html 模板很简单：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="docControl"
           [matAutocomplete]="auto" >
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let doc of filteredOptions$ | async" (onSelectionChange)="myChangeFunc($event, doc)"
              [value]="doc">
        <span>{{doc.documentTitle}}}</span>
        <small> | ID: {{doc.documentID}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

从建议中选择其中一个选项时，控制台上会引发以下错误。ERROR TypeError: _this.searchText.toLowerCase is not a function. 此外，myChangeFunc在 中使用空值调用doc。

任何帮助表示赞赏。显然，在选择时，this.docControl.valueChanges也会触发对象Document而不是输入框中的文本。我明确声明text为字符串，希望有一个类转换异常之类的东西，但无济于事。

标签： autocompleteangular-materialangular6

Answer 1

看来您正在使用服务器端过滤通过getAllMatchingDocument方法。

当使用以下命令键入有效值时，您可以从 API 检索匹配文档的列表：

// component variable to keep documents
docs: Observable<Document[]>;

// When the value changes, retrieve filtered list from back-end
this.docControl.valueChanges
  .pipe(startWith(null), debounceTime(400))
  .subscribe(val => {
    // only if the value is a valid string and not a selected doc object
    if (typeof val === 'string') {
      this.isLoading = true;
      // Update docs
      this._documentService
        .getAllMatchingDocument(val === null ? '' : val.toLowerCase())
        .subscribe(
          results => {
            this.docs = results;
            this.isLoading = false;
          },
          error => {
            console.log('Error');
          }
        )
    }
  });

修改 ngFor：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="docControl"
           [matAutocomplete]="auto" >
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let doc of docs" [value]="doc">
        <span>{{doc.documentTitle}}}</span>
        <small> | ID: {{doc.documentID}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>