Angular 问题角度：InvalidPipeArgument:'；[对象对象]，[对象对象]和#x27；对于管道'；异步管道&x27；

我试图在Angular中运行crud项目，但由于此错误，表中的数据未显示：

InvalidPipeArgument:“[object object]，[object object]”用于管道“AsyncPipe”

相应的行是名为student-list.component.ts的文件中的编号31。我试图删除async，但它无法修复任何问题。谢谢大家

学生服务

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{Observable}；
@可注射（{
providedIn:'根'
})  
导出类学生服务{
专用baseUrlhttp://localhost:8080/api/';  
构造函数（私有http:HttpClient）{}
getStudentList（）：可观察的{
返回this.http.get（`${this.baseUrl}`+'students-list'）；
}  
createStudent（学生：对象）：可观察{
返回this.http.post（`this.baseUrl}`+'save-student'，student）；
}  
deleteStudent（id:number）：可观察{
返回this.http.delete（`this.baseUrl}/delete student/${id}`，{responseType:'text}）；
}  
getStudent（id:number）：可观察{
返回this.http.get（`${this.baseUrl}/student/${id}`）；
}  
updateStudent（id:number，value:any）：可观察{
返回this.http.post（`this.baseUrl}/updatestudent/${id}`，值）；
}  
}

文件student-list.component.ts中的变量student必须是

student[]类型

不

可观察

，因为在订阅后获取其值。您还应该删除异步管道。

订阅的

数据不可见，因此您不需要在模板中使用

async

this.studentservice.getStudentList().subscribe(data =>{  
    this.students = data //data is not Observable 
})  

如果要使用

asyncPipe

，您需要这样做：

this.studentservice.getStudentList().subscribe(data =>{  
    this.students = of(data) // please do import {of} from 'rxjs';  
})

我不确定您通过api调用发送的是什么数据，但由于您得到的是[Object，Object]，请使用

JSON.parse

，如果您也没有传递JSON格式，那么在执行

parse

之前，请使用

JSON.stringify

：

---

JSON.parse（JSON.stringify（data））

问题在于student-list.component.ts中的代码：

this.studentservice.getStudentList().subscribe(data =>{  
  this.students =data;
  this.dtTrigger.next();
})

---

this.students

是一个可观察的

和
this.studentservice.getStudentList（）
返回一个可观察的
（如果返回可观察的
可能更好）。所以你应该：

this.students = this.studentservice.getStudentList();

这样，您就可以将服务中的可观察对象分配到您的属性this.students
。然后，在模板中，异步管道在生成的学生列表上订阅Observable和ngFor指令循环。
我不知道这个.dtTrigger.next（）是什么
用于，但在我建议的更改之后，您可以使用RxJS操作符实现相同的功能：

this.students = this.studentservice.getStudentList().pipe(
  tap(() => {
    this.dtTrigger.next();
  }));

students
是您订阅的响应。您的
*ngFor
不需要异步。如果删除
async
如果有错误，会出现什么错误？this.studentservice.getStudentList（）.subscribe（数据=>{this.students=data这段代码是错误的，因为学生是可观察的，而数据是不可观察的。它也适用于此技巧。谢谢。是的……所以当您有一个可观察的对象时，您可以在html中使用异步管道，这样angular就可以为您处理订阅，所以您不必担心订阅（顺便说一句，取消订阅），控制器中的代码更干净。如果您选择另一种方法（订阅控制器中的可观察对象），请记住取消订阅以避免内存泄漏，许多人都会忘记这一点。如果您不知道，您可以在中阅读更多信息：正如您在本文中所看到的，当您处理可观察对象时，您有两个选项：在控制器中订阅或在模板中订阅（使用异步管道）。根据我的经验，在控制器中订阅在许多情况下都会产生问题，并使控制器中的代码更加复杂。例如，在某些情况下，当您在可观察的
中更新数据时，您不会在页面中看到数据更新。订阅
或订阅
值更改
时，您不知道为什么。我尽量避免所有这些，并始终使用异步管道。