Angular 13模型变量声明报错及接口类型不匹配问题求助

问题1：Property has no initializer and is not definitely assigned in the constructor #

原因 #

TypeScript 开启strictPropertyInitialization严格模式时，要求类的属性必须在声明时初始化，或在构造函数中明确赋值。你的items: ItemsData[]既未初始化，构造函数里也没赋值，触发类型检查报错。

解决方法 #

推荐以下两种合规方案：

• 方案1：声明时初始化空数组

  items: ItemsData[] = [];
  

• 方案2：使用非空断言符号
  若确定组件初始化后会立即通过接口赋值，可加!告知TypeScript该属性一定会被赋值：

  items!: ItemsData[];
  

不推荐关闭strictPropertyInitialization检查，会削弱TypeScript的类型校验能力。

问题2：Property 'items' does not exist on type 'ItemsData' #

原因 #

后端返回的是包含items数组和pager对象的复合结构，但你在服务中将getAll的返回类型声明为Observable<ItemsData>——而ItemsData是单个条目的接口，根本不存在items属性，类型完全不匹配导致报错。

解决方法 #

1. 新建匹配返回结构的接口
   创建对应后端分页数据的接口：

   export interface ItemsResponse {
     items: ItemsData[];
     pager: {
       numberOfPages: number;
       currentPage: number;
       totalRecords: number;
     };
   }
   

2. 修正服务的返回类型
   将getAll方法的返回类型改为Observable<ItemsResponse>：

   getAll(pageNumber: number): Observable<ItemsResponse> {
     let params = new HttpParams();
     if (pageNumber) params = params.append('pageNumber', pageNumber);
     const httpOptions = { params };
     return this.http.get<ItemsResponse>(baseUrl, httpOptions);
   }
   

3. 可选：调整ItemsData接口的可选属性
   后端返回的条目缺少itemNameER和description字段，若这两个字段并非必填，可标记为可选属性避免类型报错：

   export interface ItemsData {
     id: number;
     itemNameER?: string;
     itemNameEN: string;
     description?: string;
   }
   

完成以上修改后，this.items = data.items的赋值逻辑就能正常运行。

内容的提问来源于stack exchange，提问作者ahmed barbary