等待数据完全加载后在angular2或4中继续
在Angular 2或4中，等待数据完全加载后继续可以通过使用异步编程技术来实现。以下是一种常见的方法：
- 使用Promise对象：在Angular中，可以使用Promise对象来处理异步操作。可以将数据加载的逻辑封装在一个Promise对象中，并在数据加载完成后解析Promise对象。
// 定义一个异步函数，模拟数据加载
function loadData(): Promise<any> {
return new Promise((resolve, reject) => {
// 模拟异步加载数据
setTimeout(() => {
const data = '加载的数据';
resolve(data);
}, 2000); // 假设数据加载需要2秒
});
}
// 在组件中使用Promise对象
export class MyComponent implements OnInit {
data: any;
ngOnInit() {
this.loadData().then((data) => {
this.data = data;
// 数据加载完成后继续执行其他逻辑
// ...
});
}
loadData(): Promise<any> {
return loadData();
}
}- 使用async/await：在Angular 2或4中，也可以使用async/await语法来处理异步操作。可以将数据加载的函数声明为异步函数，并使用await关键字等待数据加载完成。
// 定义一个异步函数，模拟数据加载
async function loadData(): Promise<any> {
return new Promise((resolve, reject) => {
// 模拟异步加载数据
setTimeout(() => {
const data = '加载的数据';
resolve(data);
}, 2000); // 假设数据加载需要2秒
});
}
// 在组件中使用async/await
export class MyComponent implements OnInit {
data: any;
async ngOnInit() {
this.data = await this.loadData();
// 数据加载完成后继续执行其他逻辑
// ...
}
loadData(): Promise<any> {
return loadData();
}
}以上是在Angular 2或4中等待数据完全加载后继续执行的两种常见方法。这些方法可以确保在数据加载完成之前不会执行后续逻辑，从而避免出现未定义的数据错误。
相关·内容
8回答
我目前正在评估替换角的正负关系。RxJS‘Observable有普通的Promise，这样我就可以使用async和await，并获得更直观的代码风格。
我们典型的场景之一:在ngOnInit中加载一些数据。使用Observables，我们可以：
ngOnInit () {
this.service.getData().subscribe(data => {
this.data = this.modifyMyData(data);
});
}
当我从getData()返回一个getData()并使用async和await时，情况如下：
async ngOnInit () {
浏览 0提问于2019-05-11得票数 99
回答已采纳
这是我的第一个堆栈溢出的帖子，如果我格式化不正确的话，我会非常赤裸裸的。
这是我的第一个角度项目，我无法分配从http.get().subscribe(.)检索的数据。方法添加到组件类变量。
我的组成部分：
...
export class LeafletMapComponent implements OnInit, AfterViewInit {
data
constructor(private ps: PeopleService, private NgZone: NgZone) {}
ngAfterViewInit(): void {
console.
浏览 1提问于2021-04-14得票数 0
1回答
我似乎不明白为什么这对我不起作用。我有一个父函数，它对子加载进程执行等待...加载进程依次调用另一个名为LOADDATA的等待...所以基本上是这样的：
module.exports = async function () {
try {
await load();
} catch (ex) {
console.log(ex);
logger.error(ex);
}
};
async function load() {
return await new Promise((resolve, reject) =&g
浏览 2提问于2017-12-22得票数 9
回答已采纳
我每隔5秒对API执行一次轮询，以获取实时数据。下面的代码可以工作，但在运行1小时后，页面崩溃(Aww Snap，带有恐龙图像和错误:内存不足)。我收集的数据非常大，我希望每次再次调用函数时，javascript都会卸载内存(垃圾收集)。我可以在Chrome任务管理器中看到，内存占用正在随着时间的推移而增长。有没有一种方法可以清除内存或卸载随时间增长的内存？
data(){
return{
newdata:[],
};
},
methods: {
loadData:async function () {
浏览 4提问于2021-05-31得票数 0
我需要测试“readline.createInterface”。
下面是我需要测试的代码：
private createReadStreamSafe(filePath: string): Promise<fs.ReadStream> {
return new Promise((resolve, reject) => {
const fileStream = fs.createReadStream(filePath)
console.log('file Stream')
fileStre
浏览 2提问于2021-12-19得票数 2
回答已采纳
3回答
我有一个带有selectedLanguage变量的服务，但是我得到了一个空值，而不是实际值。
data: any = {};
selectedLanguage = 'en';
constructor(private http: HttpClient, private storage: Storage) {
}
async use(lang: string): Promise<{}> {
lang = lang ? lang : await this.storage.get('lang');
return new Pr
浏览 4提问于2021-09-20得票数 0
回答已采纳
mycomponent.spec.ts类：
这引发错误:无法读取未定义的属性'ngOnInit‘。
let myComponent: MyComponent;
let myService: MyService;
describe('myComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [MyComponent],
providers: [
{provide: MyService, useCl
浏览 1提问于2017-05-15得票数 6
回答已采纳
1回答
我有一个问题，我有点理解承诺是如何工作的，但我想等待一个函数完成，即使它没有返回任何东西。我有一个类似的代码，但它不会等待b完成，然后开始对a的额外步骤。
例如，在本例中，我希望在sqlite中创建表，然后加载数据并运行一些测试。这里的问题是，在完成加载数据之前，它已经开始运行测试，而在loadData方法中创建的数组将为空。我甚至不希望返回这些数组，而是总是在运行测试之前等待这个过程完成。
async function initialize(){
try{
console.log("Beginning connection");
db
浏览 6提问于2022-03-27得票数 -2
1回答
我刚开始开玩笑，试着了解一下模仿是如何运作的。我无法理解如何从模拟的模块函数中解析出实际的承诺。我有一个简单的数据接口模块，如下所示
const fs = require('fs');
const path = require('path');
function loadData(fileName){
let promise = new Promise((resolve, reject) => {
fs.readFile(path.join(__dirname, `/${fileName}`), (err, data) =>
浏览 3提问于2022-07-07得票数 1
3回答
Problem：我试图使用第二个函数从Firebase检索信息，该函数依赖于从以前的函数调用中设置的数据。但是，第二个函数在第一个函数设置数据之前执行。我知道这是因为函数是如何在类型记录/角度中执行的，但是我不太熟悉异步函数的使用。
问题：让第二个函数等待它所需要的数据设置的最佳方法是什么？
附加信息：数据正在从Firestore存储/检索。使用的集合包含任意数量的城市文档。这些城市文件中的每一份都包含一组家庭。由于城市的数量可能不同，我需要首先检索有家庭的城市列表，然后使用该列表检索内部的家庭。我尝试使用承诺来解决这个问题，尝试使函数异步(然后使用await)，并进行回调函数，但是没有成功。
浏览 7提问于2022-04-20得票数 1
回答已采纳
1回答
我正在开发一个chrome扩展，我希望config对象只创建一次，并在应用程序的所有部分之间共享。依赖于配置的第二个对象也应该创建一次并共享。每个对象都包含承诺。
function config () {
this.instanse = null;
this.status = 'pending';
this.data = defualtData;
// contructor
this.init = async () => {
if(this.instanse) return this.instanse;
this
浏览 0提问于2021-05-22得票数 0
回答已采纳
我是个初学者，我试着制作一个内存游戏--这个组件为api获取数据，然后只使用有图像链接的
然后，在第一级，它应该显示3个随机图像从它总是displayedChars的获取数据:未定义，未定义，未定义
constructor(props) {
super()
this.state = {
level: 1,
numImg: 1*3,
displayedChars: [],
chars: []
}
}
async com
浏览 2提问于2022-07-03得票数 0
4回答
我有一个方法，它可以像预期的那样工作： getdata(): Promise<any> {
let query = `SELECT * FROM table`;
return new Promise((resolve, reject) => {
this.db.query(query, (error, rows) => {
if(error) reject(error);
resolve(rows);
});
});
}
ngOnInit() {
this.myservice.g
浏览 15提问于2020-06-18得票数 0
回答已采纳
我正在尝试用一个允诺加载模拟的数据，就像Angular2教程“它是”一样。
服务(模拟)：
import { Injectable } from '@angular/core';
import { ERGEBNISSE } from "./mock-ergebnisse";
@Injectable()
export class ErgebnisMockService {
getErgebnisse() {
return Promise.resolve(ERGEBNISSE);
}
}
组件：
import { Component
浏览 0提问于2016-06-13得票数 1
回答已采纳
2回答
考虑下面的代码片段： class ClientWrapper {
private client: Client;
constructor() {
this.client = new Client();
}
async connect() : Promise<void> {
return this.client.connect();
}
async isConnected(): Promise<boolean> {
return this.client.isConnec
浏览 25提问于2021-02-05得票数 0
2回答
编辑：
问题不是异步/等待本身的位置问题，而是我试图创建一个异步构造函数的事实。
我已经看过文档，阅读了其他的问题和答案，但是我仍然不能把我的头脑集中在做什么异步的功能，在哪里放置等待，得到我想要的行为。
基本上，我希望构造函数中的console.log(this.data)注销我获取的数据，但现在它注销了一个挂起的Promise。
我已经尝试了所有我能想到的东西，我总是以注销一个Promise或undefined而告终。
在这些方法中，我可以在哪里添加异步/等待以使其注销构造函数中获取的数据？
如果我用完全错误的方法来做这件事，请告诉我。
class Apa {
construc
浏览 1提问于2019-06-14得票数 1
回答已采纳
下面的代码为什么"A“和"B”在错误'a‘之前被打印
var a = async()=>{
return new Promise(async (resolve,reject)=>{
var v = await ab().catch((err)=>{
console.log("error")
return reject(err)
})
console.log("A")
console.log("
浏览 5提问于2021-02-17得票数 0
回答已采纳
2回答
我有一个函数，它执行一个昂贵的同步任务。在我的例子中，它是通过pdfkit生成的客户端pdf，但让我们只使用while循环睡眠来模拟它。
我想在运行任务之前显示一个“加载”微调器，并在任务完成时隐藏它。
如果所有东西都是同步运行的，在所有东西结束之前，Angular将没有机会运行变化检测循环，所以我认为我必须找到一种异步运行它的方法。
我试着把它包装在一个承诺中，所以假设我有：
sleep(ms) {
return new Promise((resolve, reject) => {
const expire = (new Date()).getTime() + ms;
浏览 3提问于2018-03-30得票数 5
1回答
异步代码在TS中不按预期顺序工作
、、、、
尝试使用提供程序从使用4级嵌套回调函数的firebase服务器获取数据。这是我的提供者的样子。
import { Injectable } from '@angular/core';
declare var window;
@Injectable()
export class SettingsProvider {
constructor() {
}
public async getFireBaseRemoteConfig(): Promise<any> {
if (window["FirebasePlugin"]) {
浏览 4提问于2017-08-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
