Угловая асинхронная фильтрация автозаполнения - PullRequest
Новая
       8

Угловая асинхронная фильтрация автозаполнения

0 голосов
/ 05 июня 2019

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

Это запрос на обслуживание. 

searchNewsInList2(filterValue:any):Observable<New[]>{
    return this.httpClient.get<New[]>(this.basePath)
    .pipe(
            tap((response:any)=>{
                response=response
                .filter(news=>news.title.includes(filterValue))
            return response;
            })

        );

    }

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

constructor(private notificationService:NotificationsService,private newsService: NewsService, private router: Router,private tost:ToastrService) {

    this.notificationRequest=new Notification();
    this.newsSelected=new New();
    this.newsCntrlToAdd = new FormControl();

    }

    ngOnInit() {
    this.filteredNews=this.newsCntrlToAdd.valueChanges
        .pipe(
            debounceTime(300),
            startWith(''),
            switchMap(value =>this.newsService.searchNewsInList2( value))
        );
    }

    displayFn(newFound: New) {
        if (newFound) {
            return newFound.title;
        }
    }

Это вид. 

<mat-form-field class="example-full-width">
    <input matInput placeholder="Specify a news to add"[formControl]="newsCntrlToAdd"
    [matAutocomplete]="auto" required minlength="4">
    </mat-form-field>
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let newFound of (filteredNews | async)" [value]="newFound">
            <span>{{ newFound.title }}</span>
            <!--small> | ID: {{newFound.id}}</small-->
            </mat-option>
        </mat-autocomplete>

1 Ответ

0 голосов
/ 05 июня 2019

Мне кажется, что в вашем сервисе вы делаете запрос API, а затем в своем pipe отфильтровываете любые значения, которые не совпадают.В этом случае проблема заключается в том, что оператор tap фактически не изменяет значение наблюдаемой.
Цель этого оператора - выполнить любые побочные эффекты (например, ведение журнала), не влияя на вывод.См. документы для получения дополнительной информации.
Я думаю, что вы действительно ищете, это оператор map ( документы ).Оператор map отображает полученное значение на возвращаемое вами значение.

Ваш сервисный код будет выглядеть следующим образом: 

searchNewsInList2(filterValue:any):Observable<New[]>{
    return this.httpClient.get<New[]>(this.basePath)
      .pipe(
          map((response:any)=>{
             response=response.filter(news=>news.title.includes(filterValue));
             return response;
         })
      );
}
...