Angular新手求助：AsyncPipe报错及push不是函数问题

嘿，作为Angular新手遇到这种问题太正常了，我来帮你拆解这两个错误背后的原因，再给你完整的解决方案：

错误原因分析 #

1. InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' #

AsyncPipe的作用是自动订阅Observable/Promise并返回其发出的值，它只认这两种类型。你出现这个错误大概率是两种情况：

• 你的Courses$不是Observable/Promise，而是普通的对象/数组；
• 即使Courses$是Observable，但它发出的是单个对象而非数组，而*ngFor只能遍历数组。

2. TypeError: this.Courses$.push is not a function #

push()是JavaScript数组的方法，但你把Courses$声明成了Observable（或者其他非数组类型），Observable根本没有push方法，自然会报错。而且在Angular+Firebase的场景下，你也不应该直接操作Observable来添加数据——Firebase的实时数据流会自动同步数据，你只需要调用Firebase的API添加数据即可。

完整解决方案 #

假设你用的是AngularFire（官方的Angular+Firebase集成库），下面是修正后的代码：

app.component.ts #

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

// 定义课程类型（可选，但推荐）
interface Course {
  name: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 声明为Observable<Course[]>，表示这是一个发出课程数组的数据流
  Courses$: Observable<Course[]>;

  constructor(private db: AngularFireDatabase) {
    // 从Firebase的`courses`节点获取实时数据流
    this.Courses$ = this.db.list<Course>('courses').valueChanges();
  }

  add(courseInput: HTMLInputElement) {
    const courseName = courseInput.value.trim();
    if (courseName) {
      // 调用Firebase API添加新课程，数据流会自动同步更新视图
      this.db.list('courses').push({ name: courseName });
      // 清空输入框
      courseInput.value = '';
    }
  }
}

app.component.html #

<input type="text" (keyup.enter)="add(course)" #course placeholder="输入课程名称">
<ul>
  <!-- AsyncPipe订阅Observable，拿到数组后遍历每个课程 -->
  <li *ngFor="let cour of Courses$ | async">{{cour.name}}</li>
</ul>

关键要点说明 #

1. 正确使用AsyncPipe：Courses$必须是Observable类型，且发出的是数组，这样AsyncPipe能正确解析，*ngFor也能正常遍历。
2. 通过Firebase API操作数据：不要直接操作Observable添加数据，而是调用Firebase的list.push()方法，Firebase会自动同步数据到你的Observable，视图也会随之更新。
3. 类型定义（可选但推荐）：定义Course接口能让你在开发时获得类型提示，减少错误。

内容的提问来源于stack exchange，提问作者oolaosebikan