Блог

Я пытаюсь создать приложение для управления контактами с функциями CRUD, используя Angular 8 и Spring Boot. Все функции работают правильно, кроме поиска. Я пытаюсь выполнить поиск данных с определенным именем и отобразить их в таблице. Но когда я пытаюсь выполнить поиск, он выдает мне указанную выше ошибку.

.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]);
  }
}
  

.служебный файл

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