在组合框中键入文本时调用服务

Question

首先，我不是Angular开发人员，我是一名DBA，试图学习一些代码：）

我有一个带有组合框（Kendo UI）的表单。键入时，此组合框应显示一些建议。这些建议来自服务，并且如果组合框中的字符串长度不小于4个字符，则不应调用该服务。

我相信我几乎在那儿，但是语法和如何实现pipe都失败了，debounceTime和filter ...

我有一个demo here，但函数getRegistrationList中的代码可能完全不正确且有错误。。。请放心。我知道我需要获得更多基础知识，而且我绝对愿意学习。但是我在这里很紧急，所以在此先感谢您的帮助。

该组件看起来像这样：

import { Component, ViewChild } from "@angular/core";
import { AutoCompleteComponent } from "@progress/kendo-angular-dropdowns";
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { Subject, Observable } from "rxjs";
import { debounceTime, switchMap, tap, filter } from "rxjs/operators";

import { DataService } from "./data.service";

@Component({
  selector: "my-app",
  template: `

   <form [formGroup]="flightNoticeForm">

            <kendo-combobox
              style="min-width: 20em"
              #registrationbox
              floatingLabel="First Name"
              [data]="data"
              [filterable]="true"
              [textField]="'text'"
              [valueField]="'value'"
              [placeholder]="'First name (eg. Tom)'"
              (filterChange)="getRegistrationList($event)"
              (valueChange)="getRegistrationValues($event.value)"
            >
            </kendo-combobox>

    </form>
    <pre>
      {{ registrationbox.value | json }}
    </pre>
  `
})
export class AppComponent {
 public flightNoticeForm: FormGroup;
  public data: any[];
  public scope: string = 'registration';
  public arrival: AutoCompleteComponent;

 constructor(private fb: FormBuilder, private dataService: DataService) {}

  ngOnInit() {
    this.flightNoticeForm = this.fb.group({
        registration: new FormControl({ value: '', text: '' })
    });
  }

  ngAfterViewInit() {}


  getRegistrationList(event) {

    console.log('getRegistrationList CALLED : ' + event);

    this.registrationbox.pipe(
        tap(() => {
          this.data = [];
          this.registrationbox.toggle(false);
        }),
        filter((v: string) => v.length >= 3),
        debounceTime(500),
        switchMap((x: string) => this.dataService.getData(x.toLocaleLowerCase()))
      )
      .subscribe((data: any[]) => {
        console.log("Autocomplete : " + JSON.stringify(data));
        this.data = data;
        this.registrationbox.toggle(true);
      });


  }

  getRegistrationValues(event) {
    console.log('setAcfRegistration CALLED : ' + event);
  }
}

服务看起来像这样：

import { Injectable } from "@angular/core";

import { Observable, of } from "rxjs";
import { map } from "rxjs/operators";

@Injectable({ providedIn: "root" })
export class DataService {
  constructor() {}

  getData(term: string): Observable<any[]> {
    console.log("server call...");
    return of(data).pipe(
      map(data =>
        data.filter(item => item.text.toLocaleLowerCase().startsWith(term))
      )
    );
  }
}

const data: Array<{ value: string; text: string }> = [
  {
    value: "1",
    text: "Sam"
  },
  { value: "2", text: "Tom" },
  {
    value: "3",
    text: "John"
  },
  {
    value: "4",
    text: "Aaron"
  },
  {
    value: "5",
    text: "Peter"
  },
  {
    value: "6",
    text: "Nathalie"
  },
  {
    value: "7",
    text: "Rachel"
  },
  { value: "8", text: "David" },
  {
    value: "9",
    text: "Joseph"
  },
  {
    value: "10",
    text: "Lucille"
  },
  {
    value: "11",
    text: "Rose"
  },
  {
    value: "12",
    text: "Alice"
  },
  {
    value: "13",
    text: "Isaac"
  },
  { value: "14", text: "Albert" },
  { value: "15", text: "Chris" }
];

Answer 1

您好，您可以使用与getRegistrationList函数中一样简单的方法：

 getRegistrationList(event) {
console.log('getRegistrationList CALLED : ' + event);
if(event.length>2){
this.dataService.getData(event).subscribe(data=>{
  this.data=data;
})
}}