Angular 在开始另一个操作之前，请先完成该操作

我有一个组件，在

ngOnInit（）

-方法中，我调用一个函数，从服务器加载JSON并将数据保存在局部变量中，在下一行中，我读取局部变量并使用它进行操作

代码如下：

export class TasksComponent implements OnInit {

    private tasksJSON = {};



    constructor(private router: Router, private variables: Variables, private apiService: ApiService) {
        if (!this.variables.getIsLoggedIn()) {
            this.router.navigate(['login']);
        }
    }

    ngOnInit() {
        this.getTasks();
        console.log("log 1:" + JSON.stringify(this.tasksJSON));
        let tasks = this.tasksJSON.tasks;
        this.tasksJSON = Object.keys(tasks).map(function(k) { return tasks[k] });
        console.log("log 2:" + this.tasksJSON);
    }

    getTasks() {
        this.apiService.getTasks().
            subscribe(
            data => this.tasksJSON = data,
            //error => this.error = <any>error,
            error => this.variables.setFailure(error),
            () => console.log('log getTasks():' + JSON.stringify(this.tasksJSON)
        );
    }
}

该服务如下所示：

export class ApiService {

private localURL = '../app/apiFiles/';
getTasks() {
        return this.http.get(this.localURL + 'tasks.json')
            .map((res: Response) => res.json())
            .catch(this.handleError);
    }
}

如何解决，即

让tasks=this.tasksJSON.tasks在数据加载完成时启动

编辑：添加了api服务
您的getTasks（）方法应该返回一个承诺

然后你可以做

this.getTasks().then((returnValueOfGetTasks) => {
    // Following code needs changing to use returnValueOfGetTasks
    console.log("log 1:" + JSON.stringify(this.tasksJSON));
    let tasks = this.tasksJSON.tasks;
    this.tasksJSON = Object.keys(tasks).map(function(k) { return tasks[k] });
    console.log("log 2:" + this.tasksJSON);
}).catch((err) => {
    // todo: handle err
});

当承诺得到解决时，将调用then方法

您可以使用RxJS提供的承诺或可观察性

可观察的基本上是承诺流。e、 g.observable subscribe方法类似于promise-then方法，但subscribe方法可以在每次流发出时调用多次

今天，这是bog标准的异步JS编程。异步编程基本上是处理不会立即发生的事情。e、 HTTP请求需要时间来响应。
您的getTasks（）方法应该返回一个承诺

然后你可以做

this.getTasks().then((returnValueOfGetTasks) => {
    // Following code needs changing to use returnValueOfGetTasks
    console.log("log 1:" + JSON.stringify(this.tasksJSON));
    let tasks = this.tasksJSON.tasks;
    this.tasksJSON = Object.keys(tasks).map(function(k) { return tasks[k] });
    console.log("log 2:" + this.tasksJSON);
}).catch((err) => {
    // todo: handle err
});

当承诺得到解决时，将调用then方法

您可以使用RxJS提供的承诺或可观察性

可观察的基本上是承诺流。e、 g.observable subscribe方法类似于promise-then方法，但subscribe方法可以在每次流发出时调用多次

今天，这是bog标准的异步JS编程。异步编程基本上是处理不会立即发生的事情。e、 g.HTTP请求需要时间来响应。
您需要在订阅的回调中执行这些操作，这是异步编程的基础。或者，返回一个subscribable或promise以进一步操作。您需要在对订阅的回调中执行这些操作，这是异步编程的基础。或者，返回订阅或承诺进一步操作。谢谢回答！上面我添加了我的服务。。。也许你可以看看这个。。。？然后（…）

是

ngOnInit（）中的调用吗？或者使用分离的方法
getTasks（）
？谢谢您的建议：）您不会从getTasks返回任何内容。你需要做。。。返回此.apiService.getTasks（）-这将返回您需要的可观察/承诺您可能还需要在订阅块中返回某些内容（除了返回可观察）。我不能直接在
getTasks（）
-函数中处理可观察内容吗？类似于
this.apiService.getTasks（）。然后（…）
？你有解决这个问题的办法吗？我不想在ngOnInit函数中执行此操作…：/也许我可以在
ngOnInit
中只使用
这个.gettask
和
gettask（）
中的其余部分？您通常将HTTP内容放入服务中。因此，您的getTask方法将进入一个服务，并返回一个在组件类中处理（使用subscribe（））的可观察对象。这允许在不同的组件中以不同的方式处理响应。当您想使用组件时，只需将服务注入到组件中。谢谢您的回答！上面我添加了我的服务。。。也许你可以看看这个。。。？然后（…）

是

ngOnInit（）中的调用吗？或者使用分离的方法
getTasks（）
？谢谢您的建议：）您不会从getTasks返回任何内容。你需要做。。。返回此.apiService.getTasks（）-这将返回您需要的可观察/承诺您可能还需要在订阅块中返回某些内容（除了返回可观察）。我不能直接在
getTasks（）
-函数中处理可观察内容吗？类似于
this.apiService.getTasks（）。然后（…）
？你有解决这个问题的办法吗？我不想在ngOnInit函数中执行此操作…：/也许我可以在
ngOnInit
中只使用
这个.gettask
和
gettask（）
中的其余部分？您通常将HTTP内容放入服务中。因此，您的getTask方法将进入一个服务，并返回一个在组件类中处理（使用subscribe（））的可观察对象。这允许在不同的组件中以不同的方式处理响应。当您想使用组件时，只需将服务注入到组件中。