Angular

Question

我正在尝试使用动态搜索调整 Angular+RxJS 中的示例。

html:

<header>
    <input type="text" [(ngModel)]="searchString" (ngModelChange)="inputChanged($event)" placeholder="Search">
    <button (click)="searchString = ''">Clear</button>
</header>

<div *ngFor="let result of results$ | async">
    <div *ngIf="result.data.thumbnail != 'default' && result.data.thumbnail != 'self'">
        <a [href]="result.data.url">
            <img [src]="result.data.thumbnail" alt="">
        </a>
    </div>
</div>

Angular代码：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs';
import { of } from 'rxjs';
import { switchMap } from 'rxjs';
import { fromEvent } from 'rxjs';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { distinctUntilChanged } from 'rxjs';

@Component({
  selector: 'app-root',  
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  constructor(private http: HttpClient){}  
  searchString = '';
  results$ = Array<object>();
  searchSubject$ = new Subject<KeyboardEvent>();
  
  ngOnInit() {  
    this.searchSubject$.pipe(distinctUntilChanged(), debounceTime(200), switchMap((searchString: any) => this.queryAPI(searchString))).subscribe(x => {this.results$=x.results;});
  }
  
  queryAPI(searchString: any) {   
      return this.http.get(`https://www.reddit.com/r/aww/search.json?q=${searchString}`).pipe(map((result:any) => result['data']['children']));
  }
  
  inputChanged($event:KeyboardEvent) {
      console.log('input changed', $event);
      this.searchSubject$.next($event);
  }
}

但它在html中给出了一个错误：

Error: src/app/app.component.html:6:28 - error TS2769: No overload matches this call. Overload 1 of 3, '(obj: Observable<any[] | Iterable | undefined> | Subscribable<any[] | Iterable | undefined> | Promise<any[] | Iterable | undefined>): any[] | ... 2 more ... | undefined', gave the following error. Argument of type 'object[]' is not assignable to parameter of type 'Observable<any[] | Iterable | undefined> | Subscribable<any[] | Iterable | undefined> | Promise<any[] | Iterable | undefined>'. Type 'object[]' is missing the following properties from type 'Observable<any[] | Iterable | undefined>': source, operator, lift, subscribe, and 2 more. Overload 2 of 3, '(obj: null | undefined): null', gave the following error. Argument of type 'object[]' is not assignable to parameter of type 'null | undefined'. Type 'object[]' is not assignable to type 'null'. Overload 3 of 3, '(obj: Observable<any[] | Iterable | undefined> | Subscribable<any[] | Iterable | undefined> | Promise<any[] | Iterable | undefined> | null | undefined): any[] | ... 2 more ... | undefined', gave the following error. Argument of type 'object[]' is not assignable to parameter of type 'Observable<any[] | Iterable | undefined> | Subscribable<any[] | Iterable | undefined> | Promise<any[] | Iterable | undefined> | null | undefined'. Type 'object[]' is not assignable to type 'Observable<any[] | Iterable | undefined>'.

我该如何解决？

Answer 1

如果你正确阅读错误，它会说

Argument of type 'object[]' is not assignable to parameter of type 'Observable<...> or Subscribable<...> or Promise<...>'.

它正在谈论 async 管道的参数，它是 results$ 一个简单的数组对象，而不是一些可观察的或承诺的。您可以简单地从模板中删除异步管道，只需保留 *ngFor="let result of results$"

Angular - 遍历对象不编译

Angular - iterate through objects does not compile

rxjs