我遇到数据显示问题，调用intoFormat（）函数（使用'relatedFunctions'排序，其他一切似乎正常工作）正确显示页面。但是，导航并返回到该页面会导致标题显示function.id的最后一位数字，后跟空格和子标题的空值。另外第二次（仅）访问页面时，每个活动分别加载9次，但此后的错误不会发生。
控制台没有出现任何错误，踩过TS，一切看起来都与它应该的相符。
我们的主要开发人员建议尝试实施Angular Async管道，但在我更了解/相信它确实会有所帮助之前，我宁愿不做出这么大的改变。
这是一个Imgur画廊，其中包含对同一页面进行三次访问的屏幕截图。 https://imgur.com/gallery/waUy5
问题的HTML：
<div class="outer-card mdl-cell mdl-cell--12-col mdl-grid" *ngFor="let activity of event.activities; let i = index">
<div *ngIf="intoIf(i)">
<hr *ngIf="i > 0"/>
<h4>{{intoFormat(activity, into).heading}} {{i}} {{intoFormat(activity, into).id}} <span
*ngIf="intoFormat(activity, into).subheading">{{intoFormat(activity, into).subheading}}</span></h4>
</div>
和Typescript：
intoFormat(activity: any, sort: string) {
let eventFun = this.event.functions;
if (sort == 'relatedFunctions' && eventFun) {
for (let fun of eventFun) {
// console.log(fun.id);
if (fun.id === activity[sort]) {
// console.log(fun);
return {
heading: fun.title,
subheading: `${fun.formattedStartTime} - ${fun.formattedEndTime}`,
id: fun.id
};
}
}
}
if (sort == 'relatedTracks' && this.event.tracks) {
for (let track of this.event.tracks) {
if (track.id === activity[sort]) {
return {
heading: track.title,
subheading: null
};
}
}
}
if (sort == 'startDate' && this.event.tracks) {
return {
heading: activity['formattedStartTime'],
subheading: activity['formattedStartDate']
};
}
if (sort == 'formattedStartTime' && this.event.tracks) {
return {
heading: activity['formattedStartTime'],
subheading: activity['formattedStartDate']
};
}
if (sort == 'formattedStartDate' && this.event.tracks) {
return {
heading: activity['formattedStartDate'],
subheading: null
};
}
return {
heading: activity[sort],
subheading: null
};
}
ngOnInit / ngOnChanges /构造：
constructor(protected eventService: EventService, protected router: Router, protected route: ActivatedRoute) {
}
ngOnInit() {
this.route.parent.params.subscribe(params => {
this.eventId = params['id'];
});
this.route.params.subscribe(params => {
if (!this.key) {
this.key = decodeURIComponent(params['key']);
}
if (!this.filter) {
this.filter = decodeURIComponent(params['val']);
}
if (!this.sort && params['sort']) {
this.sort = decodeURIComponent(params['sort']);
}
});
this.getEvent();
}
ngOnChanges() {
this.getEvent();
}
事件数据json样机（由于合同原因无法显示实时数据）：
"event": {
"id": "~~~~766991",
"title": "24th Annual Meeting Proceedings",
"name": "datestsite",
"modifiedDate": 1504713010000,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum posuere justo, ut dignissim erat pellentesque sit amet. Fusce ac blandit ligula. In ligula velit, feugiat in mauris eget, consequat elementum odio. Pellentesque sodales purus ut diam auctor, in tempor enim porta. Vestibulum auctor dui ante, id gravida nunc ornare non. Cras consequat quam sed auctor lacinia. Mauris auctor, eros quis ultricies venenatis, turpis orci lacinia mi, sit amet finibus justo justo in elit. Nam vitae nisl non lorem auctor faucibus ac eu purus. In maximus ante libero, in euismod enim blandit sed. Duis convallis lectus at purus pellentesque vestibulum. Donec pulvinar erat justo, vel consectetur nunc dignissim nec. Curabitur vel lacus et quam condimentum pharetra at a nisl. Proin aliquam tincidunt mi, eu sollicitudin lacus venenatis et. Mauris tempus gravida purus interdum porttitor. Donec efficitur, magna sit amet tristique ornare, lacus quam suscipit arcu, ac suscipit enim est eget augue.",
"timeZone": "America/New_York",
"startDate": 1595649600764,
"endDate": 1595736000764,
"formattedStartDate": "July 25, 2020",
"formattedStartTime": "12:00 AM",
"formattedEndDate": "July 26, 2020",
"formattedEndTime": "12:00 AM",
"graphic": " ",
"frontal": [
{
"id": "~~~~767759",
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"name": "AMS 5 Steps",
"modifiedDate": 1504704844000,
"text": "",
"url": "/assets/attachments/Lorem.pdf",
"contentUrl": "http://lorem.com/",
"contentCategorization": "",
"displayPriority": "default"
}
],
"tracks": [
{
"id": "~~~~767397",
"title": "Lorem",
"name": "CFO",
"modifiedDate": 1504647340000,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum posuere justo, ut dignissim erat pellentesque sit amet. Fusce ac blandit ligula. In ligula velit, feugiat in mauris eget, consequat elementum odio. Pellentesque sodales purus ut diam auctor, in tempor enim porta. Vestibulum auctor dui ante, id gravida nunc ornare non. Cras consequat quam sed auctor lacinia. Mauris auctor, eros quis ultricies venenatis, turpis orci lacinia mi, sit amet finibus justo justo in elit. Nam vitae nisl non lorem auctor faucibus ac eu purus. In maximus ante libero, in euismod enim blandit sed. Duis convallis lectus at purus pellentesque vestibulum. Donec pulvinar erat justo, vel consectetur nunc dignissim nec. Curabitur vel lacus et quam condimentum pharetra at a nisl. Proin aliquam tincidunt mi, eu sollicitudin lacus venenatis et.",
"color": "#006699",
"graphic": ""
}
]
"functions": [
{
"id": "~~~~767387",
"title": "Session 1",
"name": "f_001",
"description": " ",
"startDate": 1595684400000,
"endDate": 1595689200000,
"formattedStartDate": "July 25, 2020",
"formattedStartTime": "9:40 AM",
"formattedEndDate": "July 25, 2020",
"formattedEndTime": "11:00 AM",
"contentCategorization": ""
}
],
"activities": [
{
"id": "~~~~767245",
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"name": "a_007",
"modifiedDate": 1504647201000,
"contentUrl": "http://lorem.com",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"startDate": 1595684400000,
"endDate": 1595689200000,
"formattedStartDate": "July 25, 2020",
"formattedStartTime": "9:40 AM",
"formattedEndDate": "July 25, 2020",
"formattedEndTime": "11:00 AM",