html 在调用我的函数之前显示我的 ionic 4 应用程序

Question

我想我在同步性方面遇到了问题。我有一系列比赛（即体育比赛），我从 firebase 读取并显示在屏幕上。在我想显示这些之前，我想通过调用函数对这些值进行一些操作。

此函数向 closestToToday 字段添加一个 'Y' 值，该值与名称预期的最接近今天的日期相同。

根据控制台日志，我确信我的函数 addClosestToTodayFlag 工作正常，但是我的屏幕在该函数完成之前显示。

如何明确地让屏幕上的数据显示等待我的函数完成。

export class FixturesPage implements OnInit {

    public matches: Array<any>;
    constructor(private matchService: MatchService) {}

    ngOnInit(){
        this.matchService.getMatches().get().then(matchSnapshot => {
            this.matches = [];
            matchSnapshot.forEach(snap => {
                this.matches.push({
                    id: snap.id,
                    date: snap.data().date,
                    team: snap.data().team,
                    home: snap.data().home,
                    away: snap.data().away,
                    homeScore: snap.data().homeScore,
                    awayScore: snap.data().awayScore,
                    closestToToday: "N",
                });
                return false;
            });                
            this.addClosestToTodayFlag(this.matches);
         });        
    }

    private async addClosestToTodayFlag(fixtures: Array<any>)
    {   
        var today = Math.floor(Date.now()/1000);
        var fixtureClosestToToday = Math.abs(today - 
                 fixtures[0].date.seconds);

        fixtures[0].closetToToday = "Y";
        for (var i = 1; i < fixtures.length; i++)
        {
             var currentFixtureTimeToToday = Math.abs(today - 
                 fixtures[i].date.seconds);           
             /* 
              * If the difference in time between today and the 
                current fixture we are looping on is less than the 
              * difference in time of the current shortest gap then we 
                have a new fixture closest to Today
             */
             if (currentFixtureTimeToToday < fixtureClosestToToday)
                {
                    fixtureClosestToToday = currentFixtureTimeToToday;
                    fixtures[i].closetToToday="Y";
                    fixtures[i-1].closetToToday="N";    
                }
            else{
                fixtures[i].closetToToday="N";
              }            
        }
    }
}

Answer 1

当您将匹配推送到 this.matches 属性时，视图会立即更新。因此，为了仅在 addClosestToTodayFlag 函数完成时显示匹配项，您应该调用它，等待它，然后更新 matches 数组。

我的方法是创建一个变量来存储 "raw" 匹配项，然后用它调用 addClosestToTodayFlag，完成后将结果推送到 this.matches。

Insdead of this.matches = [];函数开头，创建一个临时变量，如recievedMatches，push到这个变量，传给addClosestToTodayFlag。

在 addClosestToTodayFlag 中，return 包含结果数据和然后将结果数据推送到this.matches.

更新这里有一个 code-example（未经测试，但我认为这应该有效）。我会说你甚至不需要使 addClosestToTodayFlag 异步或 return 成为一个承诺，因为它似乎并不执行任何异步任务。

export class FixturesPage implements OnInit {
    public matches: Array<any>;
    constructor(private matchService : MatchService) {}

    ngOnInit() {
        this.matchService.getMatches().get().then(matchSnapshot => {
            let matches = [];
            matchSnapshot.forEach(snap => {
                matches.push({
                    id: snap.id,
                    date: snap.data().date,
                    team: snap.data().team,
                    home: snap.data().home,
                    away: snap.data().away,
                    homeScore: snap.data().homeScore,
                    awayScore: snap.data().awayScore,
                    closestToToday: "N"
                });
                return false;
            });
            this.matches = this.addClosestToTodayFlag(matches);
        });
    }

    private addClosestToTodayFlag(fixtures : Array<any>): Array<any> {
        var today = Math.floor(Date.now() / 1000);
        var fixtureClosestToToday = Math.abs(today - fixtures[0].date.seconds);

        fixtures[0].closetToToday = "Y";
        for (var i = 1; i < fixtures.length; i++) {
            var currentFixtureTimeToToday = Math.abs(today - fixtures[i].date.seconds);
            /*
             * If the difference in time between today and the
               current fixture we are looping on is less than the
             * difference in time of the current shortest gap then we
               have a new fixture closest to Today
            */
            if (currentFixtureTimeToToday < fixtureClosestToToday) {
                fixtureClosestToToday = currentFixtureTimeToToday;
                fixtures[i].closetToToday = "Y";
                fixtures[i - 1].closetToToday = "N";
            } else {
                fixtures[i].closetToToday = "N";
            }
        }

        return fixtures
    }
}

html 在调用我的函数之前显示我的 ionic 4 应用程序

html on my ionic 4 app is displaying before my function is called

asynchronous

async-await

typescript

ionic4