Как импортировать интерфейс в угловой компонент из моделей

Question

Когда я пытаюсь получить доступ к данным интерфейса в компонент, он выдает ошибку: ошибка TS2304: не удается найти имя «Контакты»

, и когда я пытаюсь импортировать этот интерфейс, он говорит: ошибка TS2307: не удается найти модуль '../models/contacts'.

Я использовал интерфейс (контакты), чтобы сделать некоторые данные доступными для компонента (contact-list.component.ts)

Пожалуйста, скажите мне, что я делаю неправильно, посмотрев на фрагменты кода ниже.Я застрял с этими руками в последние два дня, пожалуйста помогите

 ----------model contacts.ts------------
 export interface Contacts {
  contactsList: Contact[];
}

export interface Contact {
id: number;
name: string;
city: string;
}

 -----------app.module.ts----------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ContactService } from 'src/app/services/contact.service';

import { AppComponent } from './app.component';
import { ContactListComponent } from './components/contact-list/contact- 
list.component';

 @NgModule({
   declarations: [
   AppComponent,
   ContactListComponent
   ],
  imports: [
  BrowserModule,
],
   providers: [ContactService],
  bootstrap: [AppComponent]
})
export class AppModule { }




---------------contact-list.component.ts---------------

import { Component, OnInit } from '@angular/core';
import { ContactService } from 'src/app/services/contact.service';
import { Contacts } from '../models/contacts';

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

  contacts;
  constructor(
  private contactService: ContactService
  ) { }

 ngOnInit() {
   this.contactService.getContacts().subscribe((data: Contacts) => {
     this.contacts = data ? data.contactsList : [];
  });
 }

}
 --------------------contact.service.ts--------------------
import { Injectable } from '@angular/core';
import { of, Observable } from 'rxjs';
import { Contacts } from '../models/contacts';
@Injectable({providedIn: 'root'})
export class ContactService {

contacts = {
  'contactsList': [
      {'id': 1, 'name': 'Rajesh', 'city': 'bangalore'},
      {'id': 2, 'name': 'Aarjith', 'city': 'london'},
      {'id': 3, 'name': 'Anjan', 'city': 'california'},
      {'id': 4, 'name': 'David', 'city': 'delhi'}
    ]
 };
constructor(
) { }

getContacts(): Observable<Contacts> {
    return of(this.contacts);
   }
}

ожидаемый результат: Раджеш Аарджит Анжан Давид

Answer 1

Полагаю, вам не хватает ссылки на интерфейс Contacts в файле contact-list.component.ts.Это может быть проблемой.

Answer 2

    import { Component, OnInit, OnDestroy, ViewChildren } from '@angular/core';
    import { dataService } from '../service/data.service';

    interface UserInfo {
                    id: number;
                    userName: string;
                    role: string;
                    sourceName: string
                }
    @Component( {
                    selector: 'app-patient-view',
                    templateUrl: './patient-view.component.html',
                    styleUrls: ['./patient-view.component.css']
                } )
    export class PatientViewComponent implements OnInit {


    constructor( private spinnerService: Ng4LoadingSpinnerService, private http: HttpClient, public dtService: dataService,
                private router: Router, private dialog: MatDialog ) {}
            SourceNameSelector( oneSourceName ) {

                    this.http.get( '/setSelectedSource/' + oneSourceName.id ).subscribe( data => {
                        ///code for return the source
                        this.dtService.getUserDetails = {
                            id: data['ID'], userName: data['USERNAME'], role: data['role'],sourceName: data['sourceName']
                        };
                    } );
                }
}

это только говорит вам, как использовать интерфейс в файле .ts