在 Typescript 中使用数组进行类型检查

Question

我正在尝试调用 api = https://pokeapi.co/api/v2/type

我希望使用异步管道在数据中显示数组。

我正在通过 html:

<option *ngFor="let pokemonType of pokemonTypes$ | async" [value]="pokemonType.url">{{pokemonType.name | titlecase}}</option>

我有一个过滤器接口：

export interface Filter {
  name: string;
  url: string;
}

我的 httpService 文件中有以下方法：

getTypes(): Observable<Filter[]> {
        return this.http.get<Filter[]>("https://pokeapi.co/api/v2/type", { responseType: 'json', observe: 'response' }).pipe(map((res: any) => res.body.results));
    }

但是当我尝试在我的组件中设置 pokemonTypes$ 时：

pokemonTypes$: Filter[] = [];
this.pokemonTypes$ = this.httpService.getTypes();

我收到以下错误：

Type 'Observable<Filter[]>' is missing the following properties from type 'Filter[]': length, pop, push, concat, and 27 more

关于原因有什么想法吗？

Answer 1

pokemonTypes$ 应该是可观察的，但您将其初始化为空列表。

如果你想用空列表初始化它，你应该将它初始化为一个包含空列表的可观察对象，如下所示：

pokemonTypes$ = of([]) as Observable<Filter[]>;

在 Typescript 中使用数组进行类型检查

Type checking with an array in Typescript

rxjs

angular