Question

我正在尝试按照教程进行操作，但该行出现以下错误

.subscribe(data => this.contact = data):

“Contact”类型不能分配给 Observable 类型。

让我感到困惑的是我创建的变量是 Observable。

这里是 contact-edit.component.ts 中的简化代码：

    import { Component, OnDestroy, OnInit } from '@angular/core';
    import { MatDialog, MatDialogRef } from '@angular/material/dialog';
    import { ActivatedRoute, Router } from '@angular/router';
    import { Contact } from '../shared/models/contact.model';
    import { ContactService } from '../shared/services/contact.service';
    import { constants } from './contact-edit.constants';
    import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
    import { countryDialingCodes } from '../shared/phone-number/country-dialing-codes';
    import { InvalidEmailModalComponent } from '../shared/modals/invalid-email-modal/invalid-email-modal.component';
    import { InvalidPhoneNumberModalComponent } from '../shared/modals/invalid-phone-number-modal/invalid-phone-number-modal.component';
    import { map } from 'rxjs/operators';
    import { Observable } from 'rxjs';

    @Component({
      selector: 'app-contact-edit',
      templateUrl: './contact-edit.component.html',
      styleUrls: ['./contact-edit.component.css']
    })
    export class ContactEditComponent implements OnInit, OnDestroy {

      public loadingContactMessage: string = constants.LOADING_CONTACT_MESSAGE;
      public noContactFoundMessage: string = constants.NO_CONTACT_FOUND_MESSAGE;
      public isLoading = true;
      public contact: Observable<Contact>;
      public countryDialingCodes: string[] = this.getKeys(countryDialingCodes);

      private modalRef: MatDialogRef<any>;

      constructor(private contactService: ContactService,
        private route: ActivatedRoute,
        private router: Router,
        private snackBar: MatSnackBar,
        private dialog: MatDialog) { }

      ngOnInit(): void {
        this.loadContact();
      }

      public loadContact(): void {
       this.route.params.subscribe(params => {
          const id = +params['id'];
          this.contactService.getContact(id)
            .subscribe(data => this.contact = data)
        });
      }
      
    }

这里是 contact.service.ts 的简化代码：

    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';
    import { filter, find, map } from 'rxjs/operators';

    import { Contact } from '../models/contact.model';

    @Injectable()
    export class ContactService {
      private contactsUrl = 'app/contacts';
      private contact: Observable<Contact>;

      constructor(private http: HttpClient) { }

      public getContacts(): Observable<Contact[]> {
        return this.http.get<any>(this.contactsUrl)
          .pipe(
            map(response => response.data || response)
          )
      }

      public getContact(id: number): Observable<Contact> {
        return this.getContacts().pipe(
          map(contacts => contacts.filter(contact => contact.id == id)[0])
        );
      }
    }

Answer 1

.subscribe(data => this.contact = data)

在这一行中，data 是一个 Contact，而不是一个 Observable<Contact>。

当您在 subscribe 上 Observable 时，您将获得 Observable 发出的值。

错误：类型不可分配给类型 Observable

1 个答案: