Angular 环路角同步

在角度5中如何以同步方式执行For循环。到目前为止，我有下面的代码，它不会等到ExcecuteEasyNCode完成

let items = new Array<Item>();

for (let i = 0; i <= 10000; i += 1) {

    this.ExcecuteAsyncCode(i).then(
    res => {
        let result = res;
        return result;
    }).then(response => {
        let temp = response as Item[];
        temp.forEach((cta: Item) => {   
          items.push(cta);
        });
    });

    // THIS EXCECUTED BEFORE ExcecuteAsyncCode PROMISE COMPLETED
    if (items.length < i) {
        return;
    }
}

let items=new Array（）；
for（设i=0；i{
让结果=res；
返回结果；
})。然后（响应=>{
设温度=响应为项目[]；
每小时温度（（cta:项目）=>{
物品推送（cta）；
});
});
//在ExcecuteEasyNCCode承诺完成之前，此例外
如果（项目长度

无法同步等待异步操作完成，即使可以，您也不会希望这样做，因为那样会阻塞浏览器UI

您可以将

然后

调用链接在一起，也可以使用

async/await

interface Item{
    id:number
}
class Test{
    async ExecuteAsyncCode(i:number) {
        return [] as Item[]
    }
    async method() {
        let items = new Array<Item>();

        for (let i = 0; i <= 10000; i += 1) {

            let temp = await this.ExecuteAsyncCode(i);
            temp.forEach((cta: Item) => {
                items.push(cta);
            });

            if (items.length < i) {
                return;
            }

        }
    }
}

接口项{
身份证号码
}
课堂测试{
异步ExecuteAsyncCode（i:编号）{
将[]作为项目[]返回
}
异步方法（）{
让items=newarray（）；
for（设i=0；i{
物品推送（cta）；
});
如果（项目长度

---

您可以阅读有关async/await的更多信息。例如，值得一提的是，这并不是Typescript独有的，Javascript也在使用async await编辑：您不能简单地将sync（for loop）与async混合使用。这种方法消除了for循环的使用，但应该能够解决您试图从问题中实现的目标

export class AppComponent {

  ngOnInit() {
    this.method();
  }

  i: number = 0;

  // let's say async will exit after this.i reached 5
  items = 5;//new Array<Item>(); 

  method() {
    this.asyncMethod().then((result) => {
      if (this.i > 10) return;

      if (result === 'exit') { // break the async recursive call
        return;
      }
      else {
        this.i += 1;
        this.method(); // do recursive call while this.i <= 10000 and items.length < this.i
      }
    });
  }

  asyncMethod() {
    return new Promise((resolve) => {
      let currLoop = new Promise((resolve, reject) => {
        // mimic async function using timeout
        // replace your async function here, don't forget to indicate resolve() when function is done
        setTimeout(() => {
          resolve();
        }, 3000);
      }).then(() => {
        // exit condition
        if (this.items < this.i) {
          resolve('exit');
        } else {
          resolve('done');
        }
      });
    });
  }
}

导出类AppComponent{
恩戈尼尼特（）{
这个方法（）；
}
i：数字=0；
//假设异步将在此之后退出。我达到了5
items=5；//新数组（）；
方法（）{
this.asyncMethod（）.then（（结果）=>{
如果（此.i>10）返回；
if（result=='exit'）{//中断异步递归调用
返回；
}
否则{
这个。i+=1；
this.method（）；//当this.i{
让currLoop=新承诺（（解决、拒绝）=>{
//使用超时模拟异步函数
//在这里替换异步函数，不要忘记在函数完成时指示resolve（）
设置超时（（）=>{
解决（）；
}, 3000);
}).然后（（）=>{
//退出条件
if（this.items

我可以看到你关于阻塞UI的论点。你对如何重写“for循环”有什么建议吗假设api没有返回所有项的计数。我希望使用sync for loop，这样当返回项的计数小于一步时，我就可以中断迭代。@Jim为什么异步/等待解决方案不适合您？一旦您处于异步区域，您就几乎卡在那里了，请检查注释above@Jim控制层ow将与async/await一起按预期工作。您可以打破for，正如您通常会感谢您的努力一样，但是您的回答根本不能解决我的问题。我不能等到所有承诺都完成。哦，我明白了。取消循环，改为执行递归调用如何？您仍然可以利用承诺。我已经准备好了snippet，但无法发表评论。如上所述进行编辑。希望有帮助！我非常喜欢递归方法的想法。事实上，async/await的组合将是可接受的解决方案。