错误：InvalidPipeArgument：在 invalidPipeArgumentError 处管道“AsyncPipe”的“[object Object]”

Posted 2023-02-27

【中文标题】错误：InvalidPipeArgument：在 invalidPipeArgumentError 处管道“AsyncPipe”的“[object Object]”

【英文标题】：Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError

【发布时间】：2021-01-02 05:30:19

【问题描述】：

我正在尝试使用 Angular 8 和 Spring Boot 制作具有 CRUD 功能的联系人管理应用程序。除搜索外，所有功能均正常工作。我正在尝试搜索特定名称的数据并将其显示在表中。但是当我尝试搜索时，它给了我上述错误。

.html 文件

<div class="panel panel-primary">
  <div class="panel-heading">
    <h2>Contact List</h2>
  </div>

  <div class="row">
       <div class="input-group col-lg-4 col-lg-offset-4"  style="text-align: center">
           <input type="search" id="search" value="" class="form-control" placeholder="Search by name..." name="name" [(ngModel)]="new_name"/>
           <span class="input-group-btn">
        <button class="btn btn-search" type="button" (click)="findContact()"><i class="fa fa-search fa-fw"></i> Search </button>
      </span>
       </div>
   </div>
   <br>
  <div class="panel-body">
    <table class="table table-responsive table-striped table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Work Phone</th>
          <th>Home Phone</th>
          <th>Address</th>
          <th>City</th>
          <th>Category</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let contactInfo of contactList | async">
          <td>contactInfo.name</td>
          <td>contactInfo.email</td>
          <td>contactInfo?.workPhone</td>
          <td>contactInfo?.homePhone</td>
          <td>contactInfo.address</td>
          <td>contactInfo.city</td>
          <td *ngIf="contactInfo.category==1" >Friends</td>
          <td *ngIf="contactInfo.category==2" >Collegues</td>
          <td *ngIf="contactInfo.category==3" >Family</td>
          <!-- <ng-template #two>Collegues</ng-template>-->
          <td><button (click)="deleteContact(contactInfo.contactID)" class="btn btn-danger">Delete</button>
              <button (click)="updateContact(contactInfo.contactID)" class="btn btn-info" style="margin-left: 10px">Update</button>
              <button (click)="contactDetails(contactInfo.contactID)" class="btn btn-info" style="margin-left: 10px">Details</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

.ts 文件

 import  EmployeeDetailsComponent  from './../employee-details/employee-details.component';
import  Observable  from "rxjs";
import  ContactInfoService  from "./../contactInfo.service";
import  ContactInfo  from "../models/contactInfo";
import  Component, OnInit  from "@angular/core";
import  Router  from '@angular/router';

@Component(
  selector: "app-employee-list",
  templateUrl: "./employee-list.component.html",
  styleUrls: ["./employee-list.component.css"]
)
export class EmployeeListComponent implements OnInit 

  new_name='';
  contactList: Observable<ContactInfo[]>;

  constructor(private contactInfoService: ContactInfoService,
    private router: Router) 

  ngOnInit() 
    this.reloadData();
  

  reloadData() 

    this.contactList = this.contactInfoService.getContactList();

  
  public findContact()

   this.contactInfoService.findContactByName(this.new_name)
   .subscribe(
        data => 
          this.contactList= data;
          console.log("data"+ JSON.stringify(data));
        ,
        error => 
          console.log(error);
        );
   

  deleteContact(id: number) 
    this.contactInfoService.deleteContact(id)
      .subscribe(
        data => 
          console.log(data);
          this.reloadData();
        ,
        error => console.log(error));
  

  contactDetails(id: number)
    this.router.navigate(['details', id]);
  

  updateContact(id: number)
    this.router.navigate(['update', id]);
  

.service 文件

    import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  Observable  from 'rxjs';

@Injectable(
  providedIn: 'root'
)
export class ContactInfoService

  private baseUrl = 'http://localhost:8080/';

  constructor(private http: HttpClient)  

  getContact(id: number): Observable<any> 
    return this.http.get(`$this.baseUrl+'get-contact'/$id`);
  
  findContactByName(name): Observable<any> 
    return this.http.get(`$this.baseUrl+'find'/$name`);
  

  createContact(contactInfo: Object): Observable<Object> 
    return this.http.post(`$this.baseUrl+'save-contact'`, contactInfo);
  

  updateContact(id: number, value: any): Observable<Object> 
    return this.http.put(`$this.baseUrl+'contact'/$id`, value);
  

  deleteContact(id: number): Observable<any> 
    return this.http.delete(`$this.baseUrl+'delete'/$id`,  responseType: 'text' );
  

  getContactList(): Observable<any> 
    return this.http.get(`$this.baseUrl+'contact-information'`);
  

【参考方案1】：

'contactList' 是一个对象，但它必须是一个数组才能与 *ngFor 一起使用。从您的服务中返回“any[]”，以便将返回值键入为数组。最好还是使用正确的类型而不是“any”。

getContactList(): Observable<any[]> 
    return this.http.get(`$this.baseUrl+'contact-information'`);

更好的选择是键入 http get 调用，该调用将隐式键入“getContact”方法：

getContactList() 
    return this.http.get<any[]>(`$this.baseUrl+'contact-information'`);

【讨论】：

我做了这个更改，getContactList() return this.http.get<any[]>($this.baseUrl+'contact-information'); 但仍然显示错误

也许你的 http 调用没有返回一个数组？试试 console.log(this.contactList);在 reloadData() 的末尾 - 它是否显示一个列表？