如何解决错误:InvalidPipeArgument:invalidPipeArgumentError上的管道“ AsyncPipe”为“ [object Object]”
我正在尝试使用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'}`);
}
}
解决方法
“ 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'}`);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。