Angular遍历数组时触发NG0900错误的问题咨询

嗨，我看了你的问题，其实核心原因很明确——你现在给*ngFor遍历的不是数组，而是一个对象，难怪会触发NG0900错误，咱们一步步拆解解决：

问题根源 #

你在代码里期望API返回的是share[]类型的数组，但从你console.log的输出和Swagger定义的API响应来看，实际返回的是一个包含share数组的对象，结构是：

{
  "share": [/* 你的数组元素 */]
}

而你当前的代码把整个返回对象直接赋值给了this.share，导致模板里的*ngFor="let s of share"在尝试遍历一个普通对象，这就违反了*ngFor只能遍历数组/可迭代对象的规则，自然抛出错误。

解决步骤 #

1. 修正类型定义
   首先要定义匹配API响应结构的TypeScript接口，接口名遵循首字母大写的规范更易读：

   // 定义API返回的响应结构
   interface ShareResponse {
     share: Share[];
   }
   
   // 定义单个share的结构
   interface Share {
     id: string;
     description: string;
   }
   

2. 调整HTTP请求的类型和赋值逻辑
   把HTTP请求的泛型改为ShareResponse，然后在订阅时取出对象里的share数组赋值给this.share：

   export class AppComponent {
     public share?: Share[] = [];
   
     constructor(http: HttpClient) {
       http.post<ShareResponse>('/api/member/shares/get', { 
         "getSharesRequestDto": { "accountNumber": "x123" } 
       }).subscribe(result => {
         // 重点：取result中的share数组赋值
         this.share = result.share;
         console.log(this.share);
       }, error => console.error(error));
     }
   }
   

3. 模板无需修改
   你的HTML模板逻辑是对的，只要this.share是数组类型，*ngFor就能正常遍历每一个share元素了。

小建议（给Angular新手） #

• TypeScript里建议接口、类名首字母大写，变量名用小驼峰，这样代码更规范易读；
• 后续可以尝试用async管道来简化订阅逻辑，避免手动管理订阅（比如*ngFor="let s of share$ | async"），不过先把当前问题解决再说~

备注：内容来源于stack exchange，提问作者Brian Chambers