Angular - 遍历对象不会编译答案

【问题标题】：Angular - iterate through objects does not compileAngular - 遍历对象不会编译
【发布时间】：2021-11-16 00:25:39
【问题描述】：

我正在尝试通过动态搜索调整 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>

角度代码：

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中给出了一个错误：

错误：src/app/app.component.html:6:28 - 错误 TS2769：没有过载匹配这个调用。重载 1 of 3, '(obj: Observable |可订阅 |承诺): 任何[] | ... 还有2个... |未定义'，给出了以下错误。 'object[]' 类型的参数不能分配给 'Observable |可订阅 |承诺'。类型 'object[]' 缺少来自类型 'Observable': 源，运算符，提升、订阅和另外 2 个。重载 2 of 3, '(obj: null | undefined): null'，给出以下错误。 “object[]”类型的参数不能分配给“null |”类型的参数不明确的'。类型“object[]”不可分配给类型“null”。重载 3 of 3, '(obj: Observable | 可订阅 |承诺 |空 |未定义）：任何[] | ... 2 更多 ... |未定义'，给出了以下错误。 'object[]' 类型的参数不能分配给 'Observable |可订阅 |承诺 |空 |不明确的'。类型 'object[]' 不可分配给类型 'Observable'。

我该如何解决？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

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

'object[]' 类型的参数不能分配给'Observable<...> 或 Subscribable<...> 或 Promise<...>' 类型的参数。

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

【讨论】：