Question

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

我的会议模式：

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文件，但这里有一个日志来证明Meeting对象实际上不是空的：

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＆＃34;不会识别＆＃34;它的属性。如果你想使用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,
     })
  })
}

然后它应该按照您的意愿工作，这里是

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

3 个答案:

Demo