Question

我从服务器以这种格式返回此列表：

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

数据：

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

现在我创建一个通用模型：

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

这是我的类别模型：

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

我在组件中创建此字段：

listCatModel:CategoryModel[];

并发送请求与此服务，我需要填写我的财产：

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

在html中，我使用以下代码：

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

现在它向我显示此错误：

错误TypeError：无法读取未定义的属性“数据”

at Object.eval [作为updateDirectives]（AddcategoriesComponent.html：15）

在Object.debugUpdateDirectives [作为updateDirectives]（core.js：23910）

在checkAndUpdateView（core.js：23306）

出什么问题了？我该如何解决这个问题？

Answer 1

您发出了异步请求，并且组件listCatModel的初始化时间未定义。您需要在组件中对其进行初始化：

public listCatModel: CategoryModel[] = [];

此外，您的CategoryModel没有data属性，它是一个数组，因此您不能访问它。我认为您想在这里使用通用模型：

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

现在，我们需要在component.html

中修复 * ngFor

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

尝试使用

在组件中对其进行初始化

    listCatModel:CategoryModel[] = [];

未初始化时，您的listCatModel将默认为undefined。

Answer 3

帕特里克·乌申斯基怎么说？

加号：

listCatModel:CategoryModel[];

但是接口CategoryModel没有属性数据。
您可能要使用GenericModel吗？

像这样：

listCatModel:GenericModel[] = [];

Answer 4

您正在执行异步操作。因此，在触发subscribe回调之前，您的列表为undefined。不用手动订阅可观察对象，而是让Angular使用async管道为您完成。（当然，您需要在初始化视图之前调用GetMainCat()）

在组件中：

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

listCatModel: Observable<CategoryModel[]>;

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

在模板中：

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

如果在初始化视图后调用GetMainCat()，仍然会出现undefined错误。要解决此问题，您需要检查是否定义了listCatModel：

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

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

4 个答案: