angular – 如何确保在从类调用函数之前完成构造函数/ ngOnInit？

2023年8月22日 416次阅读

我有一个类,初始化时从服务中检索数据并填充其中一个属性,即一个数组.这个类有一个函数可以对这个数组进行排序,过滤和返回.

当我实例化这个类的对象并调用这个函数时,我意识到它在构造函数和ngOnInit()函数完成之前被调用(可能是因为我使用来自Observables的异步内容,服务返回).在外部调用类的任何函数之前,如何保证构造函数和init已完全执行？

    export class BaseChoice implements PickAppraiser, OnInit {
weight = 0;
options = new Array<PickQuality>();

constructor(private championService: ChampionService) {}

ngOnInit() {
    // Iterates through the list of champions adding them to the current object
    this.championService.getChampions()
        .subscribe(champions => {
            // Iterates through the list of champions adding them to the current object
            Object.keys(champions).map(key => this.options.push(new PickQuality(champions[key], 0)))
        })
}

choose(n?: number): PickQuality[] {
    var sorted = this.options.sort((a, b) => a.score - b.score);
    return sorted;
}

}

我也尝试过这样的事情

    choose(n?: number): PickQuality[] {
    // Iterates through the list of champions adding them to the current object
    this.championService.getChampions()
        .subscribe(champions => {
            // Iterates through the list of champions adding them to the current object
            Object.keys(champions).map(key => this.options.push(new PickQuality(champions[key], 0)))
            this.reevaluate(this.options);

            var sorted = this.options.sort((a, b) => a.score - b.score);
            var chosen;
            if(n) chosen = sorted.slice(1, n);
            else chosen = sorted.slice(1, 2);
            return chosen;
        });
}

我在choose()方法本身内运行异步请求,但它不允许我这样做,我假设因为返回变量不能保证存在.

最佳答案 我想,你应该看看你是如何从根本上布置你的组件的.您可以利用observables将它们用作角度支持的方式,使用异步管道在模板中支持它.

我不确定你的组件的细节,但我会做这样的事情：

export class BaseChoice implements PickAppraiser, OnInit {
    weight = 0;
    options$: Observable<PickQuality>;
    champions$: Observable<Champion>;

    constructor(private championService: ChampionService) {}

    ngOnInit() {
        this.champions$= this
            .championService.getChampions();

        this.options$= this.champions$.map((champion, index) => {
          return new PickQuality(champion, 0)))
      })
    }
}

在你的模板中,如果你在选项$| async中执行* ngFor =“let选项”,它将自动运行该流并给你结果,然后在你的choose()函数中,我假设是用户所采取的动作点击,你可以直接通过选项来做一些事情.

如果它比这更复杂,您可以将其映射到像clicksClicked $这样的点击流,并将这些点击映射到选项流中的正确选项.

要记住的是,您正在使用一系列操作设置这些observable,并且该管道每个Observer(订阅者)运行一次,这意味着每次使用|异步管道它订阅和运行整个事情.

花一些时间学习RxJS将为你的Angular 2开发带来巨大回报.

点赞