ngFor

Question

我正在使用angular构建一个简单的Web应用程序。在我的模板中，我想显示一个教师列表。

从服务器上我得到了这种json()

{ users : [{user1}, {user2}, {user3} ] }

这是我的服务文件。

@Injectable()
export class StudentService {

    constructor(
        private http: Http
    ) { }

    getAllTeachers() {
        return this.http.get('https://guarded-beyond-19031.herokuapp.com/search');            
    }

}

在控制器内部，我调用getAllTecher()函数。这是我的控制器文件。

import { Component, OnInit } from '@angular/core';
import { StudentService } from 'src/app/common/services/student.service';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-home-student',
  templateUrl: './home-student.component.html',
  styleUrls: ['./home-student.component.scss']
})
export class HomeStudentComponent implements OnInit {

  teachers$: Observable<Array<any>>;

  constructor(
    private studentService: StudentService
  ) {
    this.teachers$ = this.studentService.getAllTeachers();
  }

  ngOnInit() {}

}

在html模板内部，我使用了async管道。这是我的模板文件。

<div *ngFor='let teacher of teachers| async'>
    {{teacher.name}}
</div>

但是在我的控制器文件的这一行

this.teachers$ = this.studentService.getAllTeachers();

出现如下错误。

Type 'Observable<Response>' is not assignable to type 'Observable<any[]>'.
  Type 'Response' is not assignable to type 'any[]'.
    Property 'length' is missing in type 'Response'.
(property) HomeStudentComponent.teacherCards$: Observable<any[]>

我的代码有什么问题，我该如何解决？

Answer 1

您的response是一个对象，您需要使用map运算符来更改在ngFor中使用它的结果的类型，并将返回类型getAllTeachers更新为Observable<any[]>

getAllTeachers() : Observable<any[]> {
        return this.http.get('https://guarded-beyond-19031.herokuapp.com/search')
         .pipe(map(result => result.user));            
 }

abd以这种方式更新教师$属性

  teachers$: Observable<any[]>;

Answer 2

添加函数的返回类型

getAllTeachers(): Observable<Array<any>> {

Answer 3

  

响应集类型错误的问题，您正在将对象分配给数组。

 getAllTeachers() {
        return this.http.get('https://guarded-beyond-19031.herokuapp.com/search')
       .pipe(map(response=>response["users"]))          
    }