类型 'void' 不可分配给类型 'Lesson[]'.ts(2322) in angular 8

Question

我正在尝试将对象从 API 传递到我的组件。服务中，数据完整

但是当我试图获取组件中的数据和 console.log 数据时。我得到的只是未定义的

我错过了什么？为什么函数 return 注意到了。毕竟，我正在从服务器获取数据
组件：

export class ClassesComponent implements OnInit {
  lessons: Lesson[] = [];
  lessonsPerPage = 16;
  currentPage = 1;

  constructor(private lessonsService: LessonsService) {

  }

  ngOnInit() {
    console.log(this.lessonsService.getLessons(this.lessonsPerPage, this.currentPage)); // undifined 
    this.lessons = this.lessonsService.getLessons(this.lessonsPerPage, this.currentPage);
    console.log(this.lessons); // undifined 
  }
}

服务：

export class LessonsService {
  private lessons: Lesson[] = [];
  private lessonUpdated = new Subject<{ lessons: Lesson[]; lessonCount: number }>();
  constructor(private http: HttpClient) { }

  getLessons(lessonsPerPage: number, currentPage: number) {
    const queryParams = `?pagesize=${lessonsPerPage}&page=${currentPage}`;
    this.http
      .get<{ message: string, lessons: any, maxLessons: number }>
      ('http://localhost:3000/api/lessons')
      .pipe(map(lessonData => {

        return {
          lessons: lessonData.lessons.map(lesson => {

            return {
              id: lesson.id,
              title: lesson.title,
              content: lesson.content,
              startDate: lesson.startDate,
              endDate: lesson.endDate,
              hoursStart: lesson.hoursStart,
              hoursEnd: lesson.hoursEnd,
              location: lesson.location,
              price: lesson.price,
              numberOfSessions: lesson.numberOfSessions
            };
          }),
          maxLessons: lessonData.maxLessons
        };
      })
      )
      .subscribe(transformedLesson => {
        this.lessons = transformedLesson.lessons;
        console.log(this.lessons) 
        this.lessonUpdated.next({
          lessons: [...this.lessons],

          lessonCount: transformedLesson.maxLessons
        });
      });
  }
}

好的。这对我来说很奇怪，即使是最简单的调用也不传递任何数据

    return this.http.get('http://localhost:3000/api/lessons')
      .subscribe(res => {
        // console.log(res.lessons);
        this.lessonsArr.push(res.lessons);
        console.log(this.lessonsArr);

      });

Answer 1

您不应在服务中订阅 HTTP 请求，因为您只需要 return 组件本身的值。

export class LessonsService {
  constructor(private http: HttpClient) {}

  getLessons(lessonsPerPage: number, currentPage: number) {
    const queryParams = `?pagesize=${lessonsPerPage}&page=${currentPage}`;
    return this.http.get <{ message: string, lessons: any, maxLessons: number }> ('http://localhost:3000/api/lessons')
      .pipe(map(lessonData => {
        return {
          lessons: lessonData.lessons.map(lesson => {
            return {
              id: lesson.id,
              title: lesson.title,
              content: lesson.content,
              startDate: lesson.startDate,
              endDate: lesson.endDate,
              hoursStart: lesson.hoursStart,
              hoursEnd: lesson.hoursEnd,
              location: lesson.location,
              price: lesson.price,
              numberOfSessions: lesson.numberOfSessions
            };
          }),
          maxLessons: lessonData.maxLessons
        };
      }));
  }
}

在您的 component.ts 上，您需要订阅服务方法以 return 来自 HTTP 请求的可观察值。

ngOnInit() {
  this.lessonsService.getLessons(this.lessonsPerPage, this.currentPage).subscribe(res => {
    // do the rest here 
    this.lessons = res;
  });
}

类型 'void' 不可分配给类型 'Lesson[]'.ts(2322) in angular 8

Type 'void' is not assignable to type 'Lesson[]'.ts(2322) in angular 8

rxjs

angular

angular-httpclient