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 に答える