0

我正在做一个自动完成搜索框，我遇到的问题是，当我在输入中写一个词时，服务很好地返回了项目结果列表。如果有匹配的元素，则服务返回，如果没有，则返回空，但问题是我的组件列表没有随服务值更新，我不知道为什么。我在按照一个例子，我的不起作用。我希望有一个人可以帮助我。

这是服务请求。

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>
4

1 回答 1

0

在我看来，在您的服务中，您正在发出 API 请求，然后在pipe过滤掉任何不匹配的值。如果是这种情况，这里的问题是tap操作员实际上并没有修改他们可观察的值。
此运算符的目的是在不影响输出的情况下执行任何副作用（例如记录）。有关更多信息，请参阅文档。
我认为您真正要寻找的是map运算符（docs）。运算符将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;
         })
      );
}
于 2019-06-05T20:05:43.857 回答