问题 Angular: InvalidPipeArgument: '[object Object],[object Object]' 用于管道 'AsyncPipe'

如何解决问题 Angular: InvalidPipeArgument: '[object Object],[object Object]' 用于管道 'AsyncPipe'

我正在尝试在 Angular 中运行一个 crud 项目，但由于此错误，表中的数据没有显示：

InvalidPipeArgument: '[object Object],[object Object]' 用于管道 'AsyncPipe'

对应的行是名为 student-list.component.ts 的文件中的第 31 行。我试图删除 async 但它没有解决任何问题。谢谢大家。

student.service.ts

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';  
import { Observable } from 'rxjs';  
  
@Injectable({  
  providedIn: 'root'  
})  
  
export class StudentService {  
  
  private baseUrl = 'http://localhost:8080/api/';  
  
  constructor(private http:HttpClient) { }  
  
  getStudentList(): Observable<any> {  
    return this.http.get(`${this.baseUrl}`+'students-list');  
  }  
  
  createStudent(student: object): Observable<object> {  
    return this.http.post(`${this.baseUrl}`+'save-student',student);  
  }  
  
  deleteStudent(id: number): Observable<any> {  
    return this.http.delete(`${this.baseUrl}/delete-student/${id}`,{ responseType: 'text' });  
  }  
  
  getStudent(id: number): Observable<Object> {  
    return this.http.get(`${this.baseUrl}/student/${id}`);  
  }  
  
  updateStudent(id: number,value: any): Observable<Object> {  
    return this.http.post(`${this.baseUrl}/update-student/${id}`,value);  
  }  
    
}  

add-student.component.ts

import { Component,OnInit } from '@angular/core';  
import { StudentService } from '../student.service';  
import {FormControl,FormGroup,Validators} from '@angular/forms';  
import { Student } from '../student';  
@Component({  
  selector: 'app-add-student',templateUrl: './add-student.component.html',styleUrls: ['./add-student.component.css']  
})  
export class AddStudentComponent implements OnInit {  
  
  constructor(private studentservice:StudentService) { }  
  
  student : Student=new Student();  
  submitted = false;  
  
  ngOnInit() {  
    this.submitted=false;  
  }  
  
  studentsaveform=new FormGroup({  
    student_name:new FormControl('',[Validators.required,Validators.minLength(5) ] ),student_email:new FormControl('',Validators.email]),student_branch:new FormControl()  
  });  
  
  saveStudent(saveStudent){  
    this.student=new Student();     
    this.student.student_name=this.StudentName.value;  
    this.student.student_email=this.StudentEmail.value;  
    this.student.student_branch=this.StudentBranch.value;  
    this.submitted = true;  
    this.save();  
  }  
  
    
  
  save() {  
    this.studentservice.createStudent(this.student)  
      .subscribe(data => console.log(data),error => console.log(error));  
    this.student = new Student();  
  }  
  
  get StudentName(){  
    return this.studentsaveform.get('student_name');  
  }  
  
  get StudentEmail(){  
    return this.studentsaveform.get('student_email');  
  }  
  
  get StudentBranch(){  
    return this.studentsaveform.get('student_branch');  
  }  
  
  addStudentForm(){  
    this.submitted=false;  
    this.studentsaveform.reset();  
  }  
}  

add-student.component.html

<h3>Create Student</h3>  
<div class="row">  
  <div class="col-sm-4"></div>  
  <div class="col-sm-4" >  
    <div [hidden]="submitted" style="width: 400px;">  
      <form [formGroup]="studentsaveform" #savestudent (ngSubmit)="saveStudent(saveStudent)">  
          <div class="form-group">  
              <label for="name">Student Name</label>  
              <input type="text" class="form-control"  formControlName="student_name" data-toggle="tooltip"   
                 data-placement="right" title="Enter Student Name" >  
              <div class="alert alert-danger" *ngIf = "(StudentName.touched) && (StudentName.invalid)"   
                style="margin-top: 5px;">  
                  <span *ngIf="StudentName.errors.required">Student Name is Required</span>  
                    <span *ngIf = "StudentName.errors.minlength">   
                        MinLength Error   
                    </span>                     
                </div>  
          </div>  
    
          <div class="form-group">  
              <label for="name">Student Email</label>  
              <input type="text" class="form-control" formControlName="student_email"   
                data-toggle="tooltip" data-placement="right" title="Enter Student Email">  
                <div class="alert alert-danger" *ngIf = "(StudentEmail.touched) && (StudentEmail.invalid)"   
                style="margin-top: 5px;">  
                  <span *ngIf="StudentEmail.errors.required">Student Email is Required</span>  
                    <span *ngIf = "StudentEmail.errors.email">   
                        Invalid Email Format   
                    </span>                     
                </div>  
          </div>  
    
          <div class="form-group">  
              <label for="branch">Student Branch</label>  
                <select class="form-control" formControlName="student_branch" data-toggle="tooltip"   
                      data-placement="right" title="Select Student Branch">  
                    <option value="null">--Select Branch--</option>  
                  <option value="B-Tech">B-Tech</option>  
                  <option value="BCA">BCA</option>  
                  <option value="MCA">MCA</option>  
                  <option value="M-Tech">M-Tech</option>  
                </select>  
          </div>  
    
          <button type="submit" class="btn btn-success">Submit</button>  
      </form>  
  </div>  
  </div>  
  <div class="col-sm-4"></div>  
</div>  
<div class="row">  
  <div class="col-sm-4"></div>  
  <div class="col-sm-4">  
      <div [hidden]="!submitted">  
         <h4>Student Added SuccessFully!</h4>  
         <button (click)="addStudentForm()" class='btn btn-primary'>Add More Student</button>  
      </div>        
  </div>  
  <div class="col-sm-4"></div>  
</div>  

student-list.component.ts

import { Component,OnInit } from '@angular/core';  
import { StudentService } from '../student.service';  
import { Student } from '../student';  
import { Observable,Subject } from "rxjs";  
  
import {FormControl,Validators} from '@angular/forms';  
  
@Component({  
  selector: 'app-student-list',templateUrl: './student-list.component.html',styleUrls: ['./student-list.component.css']  
})  
export class StudentListComponent implements OnInit {  
  
 constructor(private studentservice:StudentService) { }  
  
  studentsArray: any[] = [];  
  dtOptions: DataTables.Settings = {};  
  dtTrigger: Subject<any>= new Subject();  
  
  students: Observable<Student[]>;  
  student : Student=new Student();  
  deleteMessage=false;  
  studentlist:any;  
  isupdated = false;      
   
  
  ngOnInit() {  
    this.isupdated=false;  
    this.dtOptions = {  
      pageLength: 6,stateSave:true,lengthMenu:[[6,16,20,-1],[6,"All"]],processing: true  
    };     
    this.studentservice.getStudentList().subscribe(data =>{  
    this.students =data;  
    this.dtTrigger.next();  
    })  
  }  
    
  deleteStudent(id: number) {  
    this.studentservice.deleteStudent(id)  
      .subscribe(  
        data => {  
          console.log(data);  
          this.deleteMessage=true;  
          this.studentservice.getStudentList().subscribe(data =>{  
            this.students =data  
            })  
        },error => console.log(error));  
  }  
  
  updateStudent(id: number){  
    this.studentservice.getStudent(id)  
      .subscribe(  
        data => {  
          this.studentlist=data             
        },error => console.log(error));  
  }  
  
  studentupdateform=new FormGroup({  
    student_id:new FormControl(),student_name:new FormControl(),student_email:new FormControl(),student_branch:new FormControl()  
  });  
  
  updateStu(updstu){  
    this.student=new Student();   
   this.student.student_id=this.StudentId.value;  
   this.student.student_name=this.StudentName.value;  
   this.student.student_email=this.StudentEmail.value;  
   this.student.student_branch=this.StudentBranch.value;  
   console.log(this.StudentBranch.value);  
     
  
   this.studentservice.updateStudent(this.student.student_id,this.student).subscribe(  
    data => {       
      this.isupdated=true;  
      this.studentservice.getStudentList().subscribe(data =>{  
        this.students =data  
        })  
    },error => console.log(error));  
  }  
  
  get StudentName(){  
    return this.studentupdateform.get('student_name');  
  }  
  
  get StudentEmail(){  
    return this.studentupdateform.get('student_email');  
  }  
  
  get StudentBranch(){  
    return this.studentupdateform.get('student_branch');  
  }  
  
  get StudentId(){  
    return this.studentupdateform.get('student_id');  
  }  
  
  changeisUpdate(){  
    this.isupdated=false;  
  }  
}  

student-list.component.html 文件

<div class="panel panel-default">  
  <div class="panel-heading">  
      <h1 style="text-align: center">Students</h1><br>  
      <div class="row" [hidden]="!deleteMessage">  
             
                <div class="col-sm-4"></div>  
                <div class="col-sm-4">  
                        <div class="alert alert-info alert-dismissible">  
                                <button type="button" class="close" data-dismiss="alert">×</button>  
                                <strong>Student Data Deleted</strong>  
                        </div>  
                </div>  
                <div class="col-sm-4"></div>  
        </div>             
    </div>  
  
    
  <div class="panel-body">  
      <table  class="table table-hover table-sm" datatable [dtOptions]="dtOptions"  
      [dtTrigger]="dtTrigger"  >  
          <thead class="thead-light">  
              <tr>  
                  <th>Student Name</th>  
                  <th>Student Email</th>  
                  <th>Student Branch</th>  
                  <th>Action</th>  
                    
              </tr>  
          </thead>  
          <tbody>  
               <tr *ngFor="let student of students | async ">  //<------- HERE
                  <td>{{student.student_name}}</td>  
                  <td>{{student.student_email}}</td>  
                  <td>{{student.student_branch}}</td>  
                  <td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>   
                    <button (click)="updateStudent(student.student_id)" class='btn btn-info'  
                    data-toggle="modal" data-target="#myModal">Update</button>  
                  </td>  
                </tr>   
          </tbody><br>  
      </table>  
  </div>  
</div>   
  
<div class="modal" id="myModal">  
        <div class="modal-dialog">  
          <div class="modal-content">  
                <form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)">  
            <!-- Modal Header -->  
            <div class="modal-header">  
              <h4 class="modal-title" style="text-align: center">Update Student</h4>  
                
            </div>  
              
            <!-- Modal body -->  
            <div class="modal-body" *ngFor="let student of studentlist " >  
                <div [hidden]="isupdated">  
  
                    <input type="hidden" class="form-control"  formControlName="student_id" [(ngModel)]="student.student_id">  
                            <div class="form-group">  
                                <label for="name">Student Name</label>  
                                <input type="text" class="form-control"  formControlName="student_name" [(ngModel)]="student.student_name"  >  
                            </div>  
                      
                            <div class="form-group">  
                                <label for="name">Student Email</label>  
                                <input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">  
                            </div>  
                      
                            <div class="form-group">  
                                <label for="name">Student Branch</label>  
                                  <select class="form-control" formControlName="student_branch" required>                                     
                                    <option value="B-Tech" [selected]="'B-Tech' == student.student_branch">B-Tech</option>  
                                    <option value="BCA" [selected]="'BCA' == student.student_branch">BCA</option>  
                                    <option value="MCA" [selected]="'MCA' == student.student_branch" >MCA</option>  
                                    <option value="M-Tech" [selected]="'M-Tech' == student.student_branch">M-Tech</option>  
                                  </select>                                 
                            </div>                     
                  </div>    
                  <div [hidden]="!isupdated">  
                      <h4>Student Detail Updated!</h4>  
                  </div>          
                      
            </div>  
              
            <!-- Modal footer -->  
            <div class="modal-footer" >  
              <button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>  
              <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>  
            </div>  
              
        </form>  
          </div>  
        </div>  
      </div>  

解决方法

文件 student-list.component.ts 中的变量 Students 必须是 Student[] 类型而不是 Observable<Student[]> 类型，因为在订阅后获取其值。您还应该删除异步管道。

,

subscribed 数据不是 Observable，所以你不需要在模板中使用 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 格式，则使用 { {1}} 在执行 JSON.stringify 之前： parse

,

问题是 student-list.component.ts 中的这段代码：

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

this.students 是一个 Observable<Student[]> 而 this.studentservice.getStudentList() 返回一个 Observable<any>（如果它返回 Observable<Student[]> 会更好）。所以你应该这样做：

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

这样，您就可以将服务中的可观察对象分配给您的属性 this.students。然后，在模板中，异步管道订阅 Observable 并且 ngFor 指令在生成的学生列表上循环。 我不知道 this.dtTrigger.next(); 是做什么用的，但在我提议的更改之后，您可以使用 RxJS 运算符实现相同的目的：

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