1
votes

Comment initialiser l'interface de tableau Typescript avec observable dans Angular

Je suis nouveau sur Angular. J'ai un problème d'injection de dépendances lors de l'affichage d'une liste de contacts. J'ai un tableau d'interface dactylographié dans lequel je passe un tableau statique de contacts que j'essaie d'afficher en html.

ma classe de service

    <p class="title"> Contact Applications </p>
    <div class="list">
      <p *ngFor="let contact of contacts">
        {{contact.name}}
      </p>
    </div>

classe de modèle p >

export class ContactListComponent implements OnInit {

      contacts:Contacts[]=[];//i am getting error in this line
      constructor(
        private contactService: ContactService
      ) { }

      ngOnInit() {
        // get contacts from service and assign it to contacts
        this.contactService.getContacts().subscribe((data) => {
            this.contacts = data;//error at this line
          });
      }

My ContactListComponent

 export interface Contacts {
      contactsList: Contact[];
 }

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

html pour l'affichage

 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> {
        // send contacts to subscriber
        //return of({} as Contacts);
         return of(this.contacts);
      }
    }

je reçois l'erreur lors de l'initialisation de type 'Contacts' ne dispose pas des propriétés suivantes du type 'any []': length, pop, push, concat, et 26 autres. où je manque. J'ai changé l'initialisation en Contacts = [] mais ne semble pas fonctionner.

typescript angular observable

4 commentaires

getContacts () renvoie un observable. Pas un observable. Ainsi, chaque événement qu'il émet est une seule instance de Contacts. Pas un tableau de contacts. Donc, attribuer les contacts émis aux contacts , qui sont de type Contacts [], ne peut pas être compilé.

Mais changer le type de retour comme Observable entraîne une autre erreur Type 'Observable <{' contactsList ': {' id ': number; 'nom': chaîne; 'ville': chaîne; } []; }> 'n'est pas assignable au type' Observable '. Tapez '{' contactsList ': {' id ': nombre; 'nom': chaîne; 'ville': chaîne; } []; } 'ne contient pas les propriétés suivantes du type' Contacts [] ': length, pop, push, concat et 26 autres. Dois-je changer quoi que ce soit pendant mon abonnement?

Vous devez déclarer contacts: Contacts; au lieu de contacts: Contacts [] = [] sur ContactListComponent

J'ai essayé de déclarer de cette façon aussi mais j'obtiens une erreur dans l'abonnement La propriété «contactsList» est manquante dans le type «Contacts []» mais requise dans le type «Contacts».

3 Réponses :

1
votes

Pouvez-vous essayer ce code:

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

export class ContactService {

  constructor() { }

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

  getContacts(): Observable<Contact[]> {
    return of(this.contacts);
  }
}

export class ContactListComponent implements OnInit {

  constructor(
    private contactService: ContactService
  ) { }

  contacts: Contact[] = [];

  ngOnInit() {
    this.contactService.getContacts().subscribe((contacts) => {
      this.contacts = <Contact[]>contacts;
    });
  }
}

1 commentaires

En fait, j'ai essayé cette méthode qui ne donnera pas d'erreur de compilation, mais je ne peux pas changer mon interface dans laquelle nous avons des cas de test autonomes pour la réussir. Donc, tout ce que je peux modifier dans la liste ou la classe de service pour que cela fonctionne?

1
votes

Il y a quelques erreurs dans votre code. Cela devrait ressembler à ceci:

export interface Contacts {
  contactsList: Contact[];
}

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

@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' }
    ]
  };

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


export class ContactListComponent implements OnInit {
  contacts: Contact[]; // <= This is the correct type
  constructor(private contactService: ContactService) {}

  ngOnInit() {
    this.contactService.getContacts().subscribe((data: Contacts) => {
      // You need to get the contatactsList from the service answer.
      this.contacts = data ? data.contactsList : [];
    });
  }
}

Voir cette démo .

3 commentaires

Merci. Ce code fonctionne et affiche le résultat Mais son échec dans le fichier de test que je ne peux pas modifier.it ('devrait obtenir des données du service', fakeAsync (() => {tick (100); // attendez que les observables soient vidés avec les données expect (component.contacts) .toBe (testContatcts.contactsList);})); L'argument de type 'Contact []' n'est pas attribuable au paramètre de type 'Attendu'. Le type 'Contact []' ne contient pas les propriétés suivantes du type 'ObjectContaining': jasmineMatches, jasmineToString

Importez simplement le fichier json (ex.: importer des données depuis '../assets/data.json'; . J'ai modifié la démo pour vous montrer.

Oui . J'ai aussi essayé de cette façon pour les données json. Merci pour votre aide.

0
votes

Vous n'avez pas défini une "Interface Array" avec

let contacts: Contacts = {
  contactList: []
};

Vous avez plutôt défini un type avec une propriété typée tableau. L'expression [] produit une valeur Array .

Par conséquent, l'instruction

let contacts: Contacts = [];

est malformé car un tableau n'a pas de propriété contactList .

Le code correct lirait

export interface Contacts {
  contactsList: Contact[];
}

0 commentaires