Observable возвращает массив объектов, но не может получить доступ к свойствам объекта

Question

Я только учусь Angular и борюсь все эти выходные. У меня есть http-вызов для получения коллекции объектов Schedule. Объекты отображаются в DOM, но я не могу получить доступ к свойствам в моем классе компонентов, которые мне нужно сделать для управления выводом.

Моя служба

public getSchedule(model: GetSchedule): Observable<Schedule[]> {
        console.log('called get schedule in the service');
        console.log(model);
        console.log(environment.urls.appointment.getSchedule);
        return this.http.post<Schedule[]>(environment.urls.appointment.getSchedule , model);

Мой компонент

public schedules: Schedule[];
daySelected:string;

 public getSchedule(){
      console.log(this.daySelected);
      let time = new Date(this.daySelected)
      let date = this.datePipe.transform(time, 'yyyy-MM-dd');
      const search = new GetSchedule();
      search.date = date;
      //search.plant = this.shipment.origin.id;
      search.plant = "1300";
      search.transitType =1;
      search.isPreloaded=this.isPreloaded;

      this.appointmentService.getSchedule(search).subscribe((schedules)=>{
        this.schedules=schedules;
        console.log(this.schedules); <---------This prints out the array of all schedules properly
        console.log(this.schedules.startTime); <--------------------This returns undefined
      });
    }

HTML

<div class = "col-sm-4">
            <ng-container *ngIf="schedules?.StartTime">
            <div *ngFor="let schedule of schedules; trackBy:trackDay; let i = index;" >
                <div><input type="radio" class="hidden" name="slot" [(ngModel)]="slotSelected" (change)="scheduleSlot(slotSelected)" id="{{schedules.indexOf(schedule)}}" value={{i}}>
                <label [ngClass]="{'disabled': schedule.Block ==1}" class="radio" for="{{schedules.indexOf(schedule)}}">{{schedule.StartTime}}</label></div>
            </div>
            </ng-container>
        </div>

Если я удалю оператор elvis в ngIf страница отображается с правильным временем начала, но если я попытаюсь указать время начала console.log, оно вернет undefined. Если оставить оператор elvis, то ничего не будет отображаться.

Вызов api возвращает массив, содержащий 72 объекта со следующей формой в консоли браузера: (72) [{...}, {...}, { ...} ....]. При раскрытии отображается 0: { список всех свойств с правильными значениями }

В расписании есть свойство для слота, число от 1 до 12 соответствует двухчасовому окну. Он возвращает 6 записей на слот, поэтому мне нужно иметь возможность использовать find (x => x.startTime == "8:00"), чтобы возвращать только одну запись на слот. Но всякий раз, когда я добавляю, что startTime выбрасывается как undefined.

Есть идеи?

Answer 1

Проблема в том, что вы не определяете, какой элемент в массиве вы хотите извлечь. Помните, что startTime - это свойство каждого объекта ВНУТРИ массива, а не самого массива. Таким образом, это не сработает:

console.log(this.schedules.startTime);

Тогда как это будет работать:

console.log(this.schedules[0].startTime);

Answer 2

Я наконец нашел проблему, и она была не в моем коде, а в том, что было отправлено обратно в вызове API. Это была проблема с наименованием. То, что было отправлено обратно, было StartTime, я искал startTime, потому что все остальное в этом проекте соответствует случаю верблюда. Определенный момент для фейспалма. Теперь мне просто нужно выяснить, где разместить код поиска, чтобы отфильтровать дубликаты