打字稿：对象循环中的 For 无法识别对象的属性

Question

我正在使用for in 循环一个名为allMeetings 的会议对象列表。这个循环正在填充另一个名为allEvents 的列表，其中会议以外的对象最终会出现在该列表中。在该循环中，我试图获取会议对象的属性，但无法识别它们。我想知道如何解决或绕过它。

我的会议模式：

export class Meeting {
    id: UUID;
    date: Date;
    description: string;
}

TS 文件：
循环用于makeEvents() 方法

...
import { Meeting } from '../models/meeting.model';
import { MeetingsService } from '../services/meetings.service';
...
export class SomeComponent implements OnInit {
    allEvents: SpikesEvent[] = undefined;
    allMeetings: Meeting[] = undefined;

   constructor(private _meetingsService: MeetingsService) { }

    ngOnInit() {
        this.loadMeetings();
        this.makeEvents();
    }

    loadMeetings(): void {
        this._meetingsService.getAllMeetings().subscribe(
            (allMeetings: Meeting[]) => {
                this.allMeetings = allMeetings;
            }
        );
    }

    makeEvents(): void {
        for (let meeting in this.allMeetings) {
            this.allEvents.push({
                start: startOfDay(meeting.date),
                title: meeting.description,
                color: colors.yellowsunflower,
                type: "meeting",
                id: meeting.id,
            });
        }
    }
}

因此，会议的日期、描述和 ID 无法识别。

编辑 1：在 TS 文件中添加了构造函数。
编辑 2：我正在从 rethinkDB 检索我的数据，因此没有 JSON 文件，但这里有一个日志来证明会议对象实际上不是空的：

date: "Fri Feb 20 1993 00:00:00 GMT+00:00", description: "meeting about dummy data", id: "088c0baf-3c02-48b2-a072-65905fb0c0a7"

Answer 1

把你的代码改成这个

ngOnInit() {
    this.loadMeetings();
}

loadMeetings(): void {
    this._meetingsService.getAllMeetings().subscribe(
        (allMeetings: Meeting[]) => {
            this.allMeetings = allMeetings;
            // you should call this function once 
            // we get the data in this.allMeetings
            this.makeEvents();
        }
    );
}

Answer 2

有趣的是，每个人都错过了这样一个事实，即您正在使用 for ...in 迭代对象列表并尝试将键用作对象本身。

这就是 TypeScript “无法识别”它的属性的原因。如果你想使用for-in：

for (let meeting in this.allMeetings) {
    this.allEvents.push({
        start: startOfDay(this.allMeetings[meeting].date),
        //...
    });
}

我宁愿使用forEach。

虽然关于异步代码的其他答案对于运行时执行仍然有效，但这不是您在此处询问的问题。

Answer 3

您需要像建议的那样操作回调中的数据。这是一个有用的问题：How do I return the response from an Observable/http/async call in angular2?

如前所述，您正在使用密钥作为对象，如建议的那样，请改用forEach。所以首先执行loadMeetings并在回调调用makeEvents内部：

ngOnInit() {
    this.loadMeetings();
}

loadMeetings(): void {
   this._meetingsService.getAllMeetings()
     .subscribe((allMeetings: Meeting[]) => {
         this.allMeetings = allMeetings;
            this.makeEvents();
        });
}

那么您的makeEvents 将如下所示：

makeEvents(): void {
  this.allMeetings.forEach((x:Meeting) => {
     this.allEvents.push({
       start: startOfDay(x.date),
       title: x.description,
       color: colors.yellowsunflower,
       type: "meeting",
       id: x.id,
     })
  })
}

那么它应该可以按你的意愿工作，这是一个

Demo