Angular 自动完成异步不过滤

Question

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

这是服务请求。

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;
            })

        );

    }

这是组件中的请求，列表不会随服务 return 数据更新。

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>

Answer 1

在我看来，在您的服务中您正在发出 API 请求，然后在您的 pipe 中过滤掉任何不匹配的值。如果是这样，这里的问题是 tap 运算符实际上并没有修改它们的可观察值。
此运算符的目的是在不影响输出的情况下执行任何副作用（例如日志记录）。有关详细信息，请参阅 docs。
我认为您真正要寻找的是 map 运算符 (docs)。 map 运算符 "maps" 将发出的值转换为你的值 return。

您的服务代码将如下所示：

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;
         })
      );
}

Angular 自动完成异步不过滤

Angular autocomplete async dont filter

autocomplete

angular

rxjs-pipeable-operators

rxjs6