我无法根据 angular 中的键迭代嵌套对象

Question

我正在开发 Angular 应用程序，我有一个 end point，其中 return 以下 JSON 作为响应：

{
    "SuggestedCourses": 
    [
        {"courseId": "1","courseName": "SCourese1"},
        {"courseId": "2","courseName": "SCourese2"}
    ],
    "AvailableCourses": 
    [
        {"courseId": "3","courseName": "SCourese1"},
        {"courseId": "4","courseName": "SCourese2"}
    ],
    "RegisteredCourses": 
    [
        {"courseId": "5","courseName": "SCourese1"},
        {"courseId": "6","courseName": "SCourese2"}
    ]
}

我只想迭代 SuggestedCourses 我尝试了以下方式：

courses.component.ts

import { Component, OnInit } from '@angular/core';
import {CoursesService} from 'src/app/shared/services/courses.service'
@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit {

  constructor(private _courseService:CoursesService) { }
  
coursesData=[];

  ngOnInit(): void {
this._courseService.getCourseData().subscribe(data=>this.coursesData=data)

  }
}
}

observeables 和 services 正常工作并成功获取数据。但我无法在 HTML 页面上显示如下：

courses.component.html

<ul>               
    <li *ngFor="let s of coursesData.SuggestedCourses">
        <div>{{s.courseName}}</div>
    </li>
</ul>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BaseModuleModule} from './shared/base-module/base-module.module';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { QuizComponent } from './components/quiz/quiz.component'
import {HttpClientModule} from '@angular/common/http'
import {UserService} from './shared/services/user.service';
import { CoursesComponent } from './components/courses/courses.component';
import { CourseModuleComponent } from './components/course-module/course-module.component'

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    QuizComponent,
    CoursesComponent,
    CourseModuleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BaseModuleModule,
    HttpClientModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我运行代码时，它会显示以下错误：

The class 'CoursesComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

但是当我遍历任何简单的 JSON（未嵌套）时，它会正常工作。请告诉我如何解决这个问题？

此外，让我知道我是否使用了正确的方法来完成这项任务？如果没有，请指导我如何以其他方式完成此任务？

非常感谢！

Answer 1

您的 courses.component.ts 有问题。据我所知，您的端点返回的是 JSON 对象，而不是数组。

因此您必须将 coursesData 类型从 array 更改为 any （或者创建一个具有属性的接口).

我用这个创建了一个 Stackblitz。

我无法根据 angular 中的键迭代嵌套对象

I am unable to iterate nested objects on the basis of key in angular

angular

ngfor