Angular 在循环运行时不等待 <p-dialog> 用户确认

Question

我正在尝试实现复制粘贴操作，如果用户选择粘贴多个项目，并且如果目标文件夹中存在文件名，则应出现对话框，用户应输入该项目的新名称并继续粘贴。

然而 Angular 并没有等待盒子打开并且不允许用户输入新名称，而是在最后打开。

https://stackblitz.com/edit/primeng-tree-demo-96zfra?file=src%2Fapp%2Fapp.component.ts

这是我的代码：

for (let i = 0; i < this.pasteFiles.length; i++) {
let ispresent = this.checkIfFileExist(file);
if (ispresent) {
this.dataService.setfilepath(file.newFilePath + '/' + file.pasteFileName);
this.callpastedialog(); //this.display=true; dint work
} else {
this.mainpaste(file);
}


callpastedialog(){   //tried to call it in seperate fun but no use
this.display=true;
}

html:

<p-dialog [(visible)]="display">
.....
</p-dialog>

解决此类问题的方法是什么？

Answer 1

我从未在 Angular 中尝试过 async/await，但你为什么不使用递归函数来代替你的用例

getNextFileToProcess() {
  const file = this.pasteFiles.shift();
  if (file) {
    if (fileExists()) {
      showPopup();
      whenActionComplete() {
        getNextFileToProcess();
      }
    } else {
      processFile();
      getNextFileToProcess()
    }
  } else {
    // processing complete
  }
}