Угловая наблюдаемая с ngFor

Question

Я создаю простое веб-приложение, используя angular. В моем шаблоне я хочу показать список учителей.

С сервера я получаю 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

Ваш ответ - это объект, вам нужно использовать оператор карты, чтобы изменить тип результата, использовать его в ngFor и просто обновить тип возвращаемого значения getAllTeachers до Observable<any[]>* 1005. *

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

Answer 3

добавить тип возврата для функции

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