打字稿：对于 objects 的循环将无法识别 object 的属性

Question

我正在使用 for in 遍历名为 allMeetings 的 Meeting-objects 列表。此循环正在填充另一个名为 allEvents 的列表，其中 objects 除了 Meeting 将结束。在该循环中，我试图获取 Meeting object 的属性，但它们不被认可。请问如何解决或绕过

我的会议模型:

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

TS-File：
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-File 中添加了构造函数。
编辑 2：我正在从 rethinkDB 检索我的数据，所以没有 JSON-file 但这里有一个日志来证明会议 object 实际上不为空：

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 "won't recognize" 它的属性。如果你想使用 for-in:

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

我宁愿使用 forEach。

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

Answer 3

您需要按照建议在回调中操作数据。这是一个有用的问题：

如前所述，您正在使用键作为对象，按照建议，改为使用 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,
     })
  })
}

那么它应该可以如你所愿地工作，这里是

打字稿：对于 objects 的循环将无法识别 object 的属性

Typescript: For in loop over objects won't recognise object's properties

properties

for-in-loop

typescript

angular

Demo