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明确声明为字符串，希望发生类强制转换异常，但无济于事。

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>

选择时出现Angular 6材质自动完成错误

1 个答案: