类型 'Year' 不能分配给类型 'Year[]'。 “年份”类型中缺少属性“包含”答案

【问题标题】：Type 'Year' is not assignable to type 'Year[]'. Property 'includes' is missing in type 'Year'类型 'Year' 不能分配给类型 'Year[]'。 “年份”类型中缺少属性“包含”
【发布时间】：2018-05-23 17:02:23
【问题描述】：

在使用 angular 4 和 observable 时出现错误。

src/app/ca-calendar/calendar.component.ts(84,5) 中的错误：错误 TS2322：类型“Observable”不可分配给类型“Observable”。类型 'Year' 不能分配给类型 'Year[]'。 “年份”类型中缺少属性“包含”。

我做错了什么？

服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Year, Month } from '../../models';

@Injectable()
export class CalendarService {
  endPoint: string;
  private _calendarUrl = '/api/mycalendar';

  constructor(private http: HttpClient) {

  }

  getYear(id: string): Observable<Year> {
    return this.http.get(this._calendarUrl + '?id=' + id)._catch(this.handleError);
  }

  getYears(): Observable<Year> {
    return this.http.get(this._calendarUrl)
                    .map((res: Response) => res.json())
                    ._catch(this.handleError);

组件：

import { Component, OnInit } from '@angular/core';
import { MonthCalendarComponent } from './month-calendar/month-calendar.component';
import { Month } from '../models/month';
import { MonthsService } from '../services/calendar/months/months.service';
import { CalendarService } from '../services/calendar/calendar.service';
import { Year } from '../models';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'ca-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']

})
export class CalendarComponent implements OnInit {
public myYears$: Observable<Year[]>;


  constructor(private calendarService: CalendarService, private monthsService: MonthsService) {}

  ngOnInit() {

    this.myYears$ = this.calendarService.getYears();
}

...和模型

import { Month } from './month';
import { Week } from './week';

export class Year {
    id: String;
    number: Number;
    months: Month[];
    weeks: Week[];

    constructor() {

    }
}

【问题讨论】：

在您的服务中，您从“getYears()”返回 Observable，但在您的组件中，您将 myYears$ 分配为 Observable - 其中一个需要更改。

标签： angular angular-observable

【解决方案1】：

您的方法 getYears 签名是 Observable<Year> 并且您的变量 $myYears 使用 Observable<Year[]> 键入。尝试使用 Observable<Year[]>signature 为 getYears 方法做类似的事情：

 getYears(): Observable<Year[]> {
      return this.http.get(this._calendarUrl)
                .map((res: Response) => res.json())
                .map((yearsData: any) => {
                    return yearsData.map(yearData => {
                         const year = new Year());
                         year.id = yearData.id;
                         ...
                         return year;
                    })
                })
                ._catch(this.handleError);

使用该方法，您可以直接获得模型的实例，并且您拥有良好的签名。

希望对你有所帮助。

【讨论】：