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

Question

我正在尝试使用 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'}`);
  }
}

Answer 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'}`);