这个问题通常出现在使用 *ngFor 并尝试在模板中异步地获取数据时。该问题的解决方案是确保传递给 AsyncPipe 的对象是一个 Observable 或 Promise。否则,将会收到'InvalidPipeArgument”的错误。
例如,如果我们有一个组件里的数据成员 myData,它是一个数组:
myData: any[] = [];
并且我们希望从服务端异步获取数据并将其放入 myData 中,我们需要使用 HttpClient 发送 HTTP 请求:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class MyService {
constructor(private http: HttpClient) {}
getData(): Observable {
return this.http.get('https://api.example.com/data');
}
}
在组件中,我们使用 myService 来填充 myData:
import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'app-my-component',
template: `
- {{ item.name }}
`,
})
export class MyComponent implements OnInit {
myData: Observable;
constructor(private myService: MyService) {}
ngOnInit() {
this.myData = this.myService.getData();
}
}
这里,我们使用 myService 返回的 Observable 来填充 myData。在模板中,我们使用管道 async,它订阅传入的 Observable 并自动更新模板,使得每次接收到新数据时都可以重新渲染我的数据。
这是解决 AsyncPipe 报错的一种典型方式,当然也可以根据具体情况进行调整。
上一篇:Angular问题:无法找到支持类型为“对象”的“[objectObject]”的不同之处。NgFor仅支持绑定到诸如数组之类的可迭代对象。
下一篇:Angular问题:在解析位置0附近出现意外的JSON令牌“<”,解析错误,类似于“<html> npm ERR! <head> npm ERR! <title> ...”。