Wie verwaltet man Datentypen zwischen angular2 Services Aufruf und Komponente?

Question

Ich habe einen Dienst entwickelt, der Typ zurückgeben Objekt ist:

import { Injectable } from '@angular/core'; 
import {ClientApi} from '../shared/sdk/services'; 
import {CategoryApi} from '../shared/sdk/services'; 
@Injectable() 
export class CategoryService { 
public categoriesList; 
name = ''; 

constructor(private category: CategoryApi, private userApi: ClientApi) {} 

getCategories(){ 
     this.category.find({where: {clientId: this.userApi.getCurrentId()}}).subscribe((data) => { 
     this.categoriesList = data; 
      console.log("type : " + typeof(this.categoriesList)); 
      console.log ("data:" + JSON.stringify(data)); 
     return data; 
    }, err => { 
     console.log(err); 
    }); 
} 
} 

In einer ts Komponentendatei, nenne ich diesen Dienst:

import {Component} from '@angular/core'; 
import {CategoryService} from './category.service' 

@Component({ 
    selector: 'category', 
    templateUrl: './category.component.html', 
    styleUrls: ['./category.component.css'], 
    providers: [CategoryService] 
}) 

export class CategoryComponent { 

    public categories; 

    constructor(categoryService: CategoryService) 
    { 
     this.categories = categoryService.getCategories(); 
     console.log ("categories: " + this.categories); 

    } 

} 

die variablen Daten, die ich in meinem Dienst haben, ist von Objekt Typ und auf meiner Komponente ts-Datei, habe ich eine undefined Typ. Die Folge ist, dass die HTML-Datei die Komponenteneigenschaften nicht lesen kann.

Jede Hilfe wäre willkommen.

Vielen Dank im Voraus.

Answer 1

denke ich, was Sie wollen, ist

getCategories(){ 
     return this.category.find({where: {clientId: this.userApi.getCurrentId()}}).map((data) => { 
     this.categoriesList = data; 
      console.log("type : " + typeof(this.categoriesList)); 
      console.log ("data:" + JSON.stringify(data)); 
     return data; 
    }, err => { 
     console.log(err); 
    }); 
} 

und dann verwenden, wie

categoryService.getCategories().subscribe(data => this.categories = data) 

oder

<div *ngFor="let c of categoryService.getCategories() | async">...</div> 

Sie können die Daten nicht bekommen außerhalb eines map(), subscribe() oder irgendein anderer Betreiber. Sobald Sie einen asynchronen Anruf tätigen, bleibt dieser Anruf asynchron, und das ist kein Problem.

Answer 2

Das Problem ist, dass das Ergebnis Ihres Serviceaufrufs generischer bzw. nicht bekannter Typ in Ihrer Anwendung ist. Um diesen Fehler zu beheben, müssen Sie die Typüberprüfungen deaktivieren, indem Sie var verwenden, wenn Sie das Ergebnis im Abonnement erhalten. Und durch Deklarieren von categoriesList des Typs "any"

Dann können Sie es in Ihrer App (HTML-Vorlagen) verwenden, wie Sie es tun!

Sehen Sie hier die Schnipsel:

public categoriesList:any; 

    ... 
    this.dataService.getRecords('MT_Entity') 
     .subscribe((data: any[]) => { 
      var response: any = data; 
      var resprecords = response.items; 
      this.categoriesList = resprecords; 
     }, err => { 
      console.log(err); 
    }); 
    ...