Вызов службы в виде текста набирается в поле со списком - PullRequest
Новая
       9

Вызов службы в виде текста набирается в поле со списком

0 голосов
/ 13 апреля 2020

Прежде всего, я не Angular Разработчик, я администратор баз данных, пытающийся выучить некоторый код:)

У меня есть форма, в которой есть поле со списком (Kendo UI). Этот комбинированный список должен отображать некоторые предложения при вводе. Эти предложения исходят от службы, и служба не должна вызываться, если строка в выпадающем списке имеет длину не менее 4 символов.

Я думаю, что я в значительной степени там, но мне не удается с синтаксисом и как реализовать pipe, debounceTime и filter ...

У меня есть демо здесь , но код внутри функции getRegistrationList, вероятно, абсолютно неверен и неисправен. .. Пожалуйста, будьте снисходительны. Я знаю, что мне нужно получить больше базовых знаний, и я абсолютно готов учиться. Но я нахожусь в чрезвычайной ситуации, поэтому заранее благодарю за помощь.

Компонент выглядит следующим образом: 

<code>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 }}
`}) класс экспорта AppComponent {publi c flightNoticeForm: FormGroup ; publi c data: any []; publi c scope: string = 'registration'; publi c прибытие: AutoCompleteComponent; конструктор (приватный fb: FormBuilder, приватный dataService: DataService) {} ngOnInit () {this.flightNoticeForm = this.fb.group ({регистрация: новый FormControl ({value: '', text: ''})}); } ngAfterViewInit () {} getRegistrationList (event) {console.log ('getRegistrationList CALLED:' + событие); this.registrationbox.pipe (tap (() => {this.data = []; this.registrationbox.toggle (false);}), фильтр ((v: строка) => v.length> = 3), debounceTime (500), switchMap ((x: string) => this.dataService.getData (x.toLocaleLowerCase ()))) .subscribe ((data: any []) => {console.log ("Автозаполнение:" + JSON .stringify (data)); this.data = data; this.registrationbox.toggle (true);}); } getRegistrationValues ​​(событие) {console.log ('setAcfRegistration CALLED:' + событие); }}

А сервис выглядит так: 

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" }
];

1 Ответ

1 голос
/ 13 апреля 2020

Здравствуйте, вы можете использовать что-то простое в функции getRegistrationList: 

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