Angular 应用程序无法找到我的界面文件

Question

我正在尝试为 OMBD Api 制作一个简单的测试床。我有以下名为 ombdresponse.ts 的接口文件：

interface IOMBDResponse {
    Title: string;
    Year: string;
    Director: string;
    Poster: string;
}

我遇到的错误位于我的 ombd-api.service.ts 中：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap } from 'rxjs';
import { throwError } from 'rxjs';

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

  private _siteURL="https://www.ombdapi.com/";
  private _key = '?apikey=63455f5a';


  constructor(private _http:HttpClient) { }

  getMovieData(movieName): Observable<IOMBDResponse> {
    return this._http.get<IOMBDResponse>(this._siteURL + this._key + movieName)
    .pipe(
      tap(data => console.log('Moviedata/error' + JSON.stringify(data))
      ),
      catchError(this.handleError)
    );
  }

  private handleError(err:HttpErrorResponse) {
    console.log('OmbdApiService: ' + err.message);
    return throwError(err.message);
  }


}

的 app.component.ts 中也有相同的错误：

import { Component } from '@angular/core';
import { Axios } from 'axios';
import { OmbdApiService } from './services/ombd-api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 
})
export class AppComponent {
  title = 'openstackProject';

  movieData:IOMBDResponse;
  
 
  errorMessage: any;

  constructor(private _ombdService: OmbdApiService) {

  }

  getMovieDetails(movieName:string) : boolean {
    this._ombdService.getMovieData(movieName).subscribe(
      movieData => {
        this.movieData=movieData;
        console.log('Director name: ' + this.movieData.Director);
      },
      error => this.errorMessage = <any>error
    );
    return false;
  }

}

我收到以下两个错误：

Error: src/app/services/ombd-api.service.ts:19:27 - error TS2304: Cannot find name 'IOMBDResponse'.

19     return this._http.get<IOMBDResponse>(this._siteURL + this._key + movieName)
                             ~~~~~~~~~~~~~

所以

Error: src/app/app.component.ts:14:13 - error TS2304: Cannot find name 'IOMBDResponse'.

14   movieData:IOMBDResponse;

我 显然该应用程序在查找我的界面文件时遇到问题。但是，接口文件会出现在智能感知中。 有人可以解释我做错了什么吗？

尝试将接口公开。我对使用 Angular 的外部 API 非常陌生。

Answer 1

您需要像这样

export interface IOMBDResponse {
    Title: string;
    Year: string;
    Director: string;
    Poster: string;
}

在需要的地方导出和导入您的界面 import { IOMBDResponse } from '/directory/'