自定义api格式的返回列表问题

Question

I return this list by this format from server :

{data: Array(6), success: true, status: 0, message: "عملیات با موفقیت انجام شد"}

data:

data: Array(6)
         0: {name: "سیاسی", parentID: 0, categoryParent: null, categories: null, posts: null, …}
         1: {name: "ipouyoiyoi", parentID: 0, categoryParent: null, categories: null, posts: null, …}
         2: {name: "سیاسی", parentID: 0, categoryParent: null, categories: null, posts: null, …}
         3: {name: "ورزشی", parentID: 0, categoryParent: null, categories: null, posts: null, …}
         4: {name: "هنری", parentID: 0, categoryParent: null, categories: null, posts: null, …}
         5: {name: "گردشگری", parentID: 0, categoryParent: null, categories: null, posts: null, …}
message: "عملیات با موفقیت انجام شد"
status: 0
success: true

now i create a Generic Model:

export interface GenericModel<T> {
 data:T;
 isSuccess:boolean;
 statusCode:number;
 message:string;
}

and this is my category model:

export interface CategoryModel {
id:number;
name:string;
parentId:number;
}

i create this field in component:

listCatModel:CategoryModel[];

and send a request to service with this , and i need to fill my property :

  GetMainCat(){
this.categoryService.GetListItem(this.GetAllcatListUrl).subscribe(data=>{
  this.listCatModel=data
});
}

and in html i use this code:

 <option *ngFor="let item of listCatModel.data" selectedCat="cat.id" [value]="item.id">{{item.name}}</option>

now it show me this error:

ERROR TypeError: Cannot read property 'data' of undefined

at Object.eval [as updateDirectives] (AddcategoriesComponent.html:15)

at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910)

at checkAndUpdateView (core.js:23306)

What is the problem? How can i solve this problem?

Answer 1

You make asynchronous request, and on the initialization time of your component listCatModel is undefined. You need to initialize it in component:

public listCatModel: CategoryModel[] = [];

Moreover, your CategoryModel don't have data property and it's an array so you cant access it. I think that you wanted to use your generic model here:

public listCatModel: GenericModel<CategoryModel>[] = [];

Now, We need to fix *ngFor inside component.html

let item of listCatModel.data // typeof listCatModel is array - wrong

// this should be working
<option *ngFor="let item of listCatModel">
    {{ item.data.name }}
</option>

Answer 2

Try to initialize it in your component with

    listCatModel:CategoryModel[] = [];

When not initialized, your listCatModel will default to undefined .

Answer 3

What Patryk Uszyński said.

plus:

listCatModel:CategoryModel[];

But the interface CategoryModel has no attribute data.
You probably want to use GenericModel?

like so:

listCatModel:GenericModel[] = [];

Answer 4

You are performing an async operation. Therefore before the subscribe callback is fired, your list is undefined . Instead of manually subscribing to the observable, let Angular do it for you using async pipe. (Of course you need to call GetMainCat() before the view is inited)

In component:

import {map} from 'rxjs/operators';
......

listCatModel: Observable<CategoryModel[]>;

GetMainCat(){
   this.listCatModel = this.categoryService.GetListItem(this.GetAllcatListUrl).pipe(map(response => response.data));
}

In template:

<option *ngFor="let item of (listCatModel | async)" selectedCat="cat.id" [value]="item.id">
    {{item.name}}
</option>

If you call GetMainCat() after the view is inited, you will still get undefined error. To solve it, you need to check whether listCatModel is defined:

<ng-container *ngIf="listCatModel">
    <option *ngFor="let item of (listCatModel | async)" selectedCat="cat.id" [value]="item.id">
        {{item.name}}
    </option>
<ng-container>