Question

我对此不知所措。我收到以下错误：

ERROR in src/app/People/People.component.ts(38,31): error TS2322: Type 'interest' is not assignable to type 'interest[]'.
src/app/People/People.component.ts(38,31): error TS2322: Type 'interest' is not assignable to type 'interest[]'.
  Property 'includes' is missing in type 'interest'.

我对angular非常陌生，这是我在该项目中遇到的最后一个错误。

当我评论以下内容时，ng服务效果很好。

  getInterestForPerson(id: number): void {
    console.log(id);
    this.interestService.getInterestsForPerson(id)
      .subscribe(interests => this.interests = interests);
  }

但是我可以在程序运行时取消注释，它可以完美运行。似乎是在初始化上。

import { Component, Inject, OnInit, HostListener } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Person } from '../Person';
import { PersonService } from '../PersonService';
import { interest } from '../interest';
import { interestService } from '../interestService';

@Component({
  selector: 'app-people',
  templateUrl: './people.component.html'

})
export class PeopleComponent implements OnInit {
  people: Person[];
  interests: interest[];
  searchText: string = '';

  selectedPerson: Person;

  constructor(private personService: PersonService, private interestService: interestService) { }

  @HostListener('input') oninput() {

  }

  ngOnInit() {
    this.getPeople();
  }

  getPeople(): void {
    this.personService.getPeople()
      .subscribe(people => this.people = people);
  }

  getInterestForPerson(id: number): void {
    console.log(id);
    this.interestService.getInterestsForPerson(id)
      .subscribe(interests => this.interests = interests);
  }

  onSelect(person: Person): void {
    this.selectedPerson = person;
    this.getInterestForPerson(person.id);
  }

}

服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { MessageService } from './message.service';

import { interest } from './interest'


const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({ providedIn: 'root' })
export class interestService {

  private interestUrl = 'api/interest';  // URL to web api
  /** GET interests from the server */
  constructor(
    private http: HttpClient,
    private messageService: MessageService) { }

  /** GET interests from the server */
  getInterests(): Observable<interest[]> {
    return this.http.get<interest[]>(this.interestUrl)
      .pipe(
        tap(_ => this.log('fetched interests')),
        catchError(this.handleError<interest[]>('getInterests', []))
      );
  }

  /** GET interests for a person by id. Will 404 if id not found */
  getInterestsForPerson(id: number): Observable<interest> {
    const url = `${this.interestUrl}/${id}`;
    return this.http.get<interest>(url).pipe(
      tap(_ => this.log(`fetched interests for person id=${id}`)),
      catchError(this.handleError<interest>(`getInterestsForPerson id=${id}`))
    );
  }


  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

  /** Log a interestService message with the MessageService */
  private log(message: string) {
    this.messageService.add(`interestService: ${message}`);
  }
}

Answer 1

getInterestsForPerson(id: number): Observable<interest>

这表示您的函数返回一个可观察的对象，该对象发出单个interest对象。如果应该是数组，则需要与函数中的其他注释一起声明：

getInterestsForPerson(id: number): Observable<interest[]> {
  const url = `${this.interestUrl}/${id}`;
  return this.http.get<interest[]>(url).pipe(
    tap(_ => this.log(`fetched interests for person id=${id}`)),
    catchError(this.handleError<interest[]>(`getInterestsForPerson id=${id}`))
  );
}

类型“兴趣”中缺少属性“包含”

1 个答案: