如何在Angular2中将Observable从服务到数组转换为ngFor？

Question

I have a problem with returns types. Here is my problem : First my data structure is: {"categoryName":"Google","id":"58591d2b7672d99910497bec","clientId":"585808f6737f6aad1985eab2"},{"categoryName":"Yahoo","id":"58591d4c7672d99910497bef","clientId":"585808f6737f6aad1985eab2"},{"categoryName":"Msn","id":"585d25f6ae4b2ecb056bc514","clientId":"585808f6737f6aad1985eab2"}

I have an HTML file that contains:

<tr *ngFor="let category of categories; let id = index">
                        <td>
                            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
                                   for="row[3]">
                                <input type="checkbox" id="row[3]" class="mdl-checkbox__input"/>
                            </label>
                        </td>
                        <td class="mdl-data-table__cell--non-numeric"><a [routerLink]="['/category/links']"></a>{{
                            category.categoryName }}
                        </td>
                        <td class="mdl-data-table__cell--non-numeric">{{category.categoryName}}</td>
                         <td #category.id><i (click)="deleteCategory(id)" class="material-icons">delete</i></td>
                    </tr>

The component is as below (I only write here ngOnInit() ):

ngOnInit(): void
    {
        this.categoryService.getCategories().subscribe((data) => {
               this.categories=data;
                console.log("data inside component" + data);
            }
        )
            //console.log(JSON.stringify(this.categories));
    //        .map((data) =>
    //        {
    //            this.categories=data;
    //        })
    }

and the service is:

getCategories(){
        return this.category.find({where: {clientId: this.userApi.getCurrentId()}}).map((data) => {

            console.log("type of data: "+ typeof(data));

            console.log ("data:" + JSON.stringify(data));
            //return data;
        }, err => {
            console.log(err);
        });
    };

If I do a console.log from the service, the data is shown. If I do a console.log from the component, nothing is shown : the message is:

data inside componentundefined

as if the "data" is not passed from the Service to the Component, not passed, or not from the correct type.

Any idea?

Thanks in advance and best regards

Answer 1

uncomment return in map statement. because you do not return anything after do map on data, you got undefined return.

getCategories() {
   return this.category.find({where: {clientId: this.userApi.getCurrentId()}}).map((data) => {

     console.log("type of data: "+ typeof(data));

     console.log ("data:" + JSON.stringify(data));
     return data; // uncomment this line
   }, err => {
      console.log(err);
   });
};