Observable返回对象数组,但不能访问对象属性



我刚刚在学习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>

如果我删除ngIf中的elvis运算符,则页面显示正确的开始时间,但如果我尝试console.log开始时间,则返回undefined。保持elvis操作符不会显示任何内容。

api调用在浏览器控制台中返回一个包含72个对象的数组,其形式如下:(72(〔{…},{…〕0:{具有正确值的所有属性的列表

时间表有一个slot的属性,它是数字1-12,表示两个小时的窗口。它每个插槽返回6个条目,所以我需要能够使用find(x=>x.startTime=="8:00"(来每个插槽只返回一个条目。但每当我添加startTime时,它都会被抛出为未定义。

有什么想法吗?

问题是您没有定义要从数组中的哪个元素中绘制。请记住,startTime是数组中每个对象的属性,而不是数组本身的属性。因此,这将不起作用:

console.log(this.schedules.startTime);

而这将起作用:

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

我终于发现了问题,问题不在于我的代码,而在于API调用中返回的内容。这是一个命名问题。收到的是StartTime,我在寻找StartTime,因为这个项目中的其他一切都遵循骆驼的情况。一个确定的手掌时刻。现在我只需要弄清楚把Find代码放在哪里就可以过滤掉重复的

最新更新