Question

我在做一个自动完成搜索框，我遇到的问题是，当我在输入中输入单词时，服务会很好地返回项目结果列表。如果有匹配的元素，服务将返回；否则，将返回空，但是问题是我的组件列表未使用服务值进行更新，我也不知道为什么。我按照一个例子，我的行不通。我希望有人能帮助我。

这是服务请求。

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>

Answer 1

在我看来，您在服务中正在发出API请求，然后在pipe中过滤出所有不匹配的值。如果真是这样，这里的问题是tap运算符实际上并未修改它们的可观察值。
该运算符的目的是在不影响输出的情况下执行任何副作用（例如记录）。有关更多信息，请参见docs。
我认为您真正要寻找的是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;
         })
      );
}

角度自动完成异步不过滤器

1 个答案: