如何在另一个模式关闭时打开 angular 2 material 模式

Question

我有一个名为 medicoesSelecionadas Selected 的列表，我需要使用列表中的每个元素打开一个模态，但代码只能在前一个模态关闭时打开另一个模态。

我试过这段代码：

this.medicoesSelecionadas.forEach(medicao => {
  let historicoEmpreiteiro;
  this.loading = true;
  console.log(' ENTORU AQUI ')
  this.medicaoEmpService.ObterHistoricoEmpreiteiro(medicao.id)
    .subscribe(result => {
      this.loading = false;
      historicoEmpreiteiro = result;
      const refDialog = this.dialog.open(DescontoEmpreiteiroComponent, {
        data: { historicoEmpreiteiro: JSON.stringify(historicoEmpreiteiro) }
      });

      refDialog.afterClosed().subscribe(r => {
        console.log('Entrou closed');
      });

    });
    console.log(' ENTORU ALI ')
});

但问题是，foreach同时打开所有模态框

Answer 1

假设：this.medicoesSelecionadas 是一个对象数组

只要this.medicoesSelecionadas数组不是很长，我可能会用递归来解决这个问题。假设您上面的代码在一个名为 'existingFunc()' 的函数中，我将执行如下操作：

existingFunc() {
    this.recursiveFunc(this.medicoesSelecionadas);
}

recursiveFunc(medicoesSelecs: Array<Object>) { // replace this type with the correct one
    if (medicoesSelecs.length > 0) {
        let medicao = medicoesSelecs.shift(); // remove first item from array
        let historicoEmpreiteiro;
        this.loading = true;
        console.log(' ENTORU AQUI ');
        this.medicaoEmpService.ObterHistoricoEmpreiteiro(medicao.id)
            .subscribe(result => {
                this.loading = false;
                historicoEmpreiteiro = result;
                const refDialog = this.dialog.open(DescontoEmpreiteiroComponent, {
                    data: { historicoEmpreiteiro: JSON.stringify(historicoEmpreiteiro) }
                });

                refDialog.afterClosed().subscribe(r => {
                    console.log('Entrou closed');
                    this.recursiveFunc(medicoesSelecs); // call self with remaining array
                });
            });
        console.log(' ENTORU ALI ');
        }
    }
}

这会产生一些开销，因为所有函数都将保留在堆栈中，直到最后一个函数最终关闭，因此您需要注意不要以太大的数组开始调用。

如何在另一个模式关闭时打开 angular 2 material 模式

How to open a angular 2 material modal when another modal is closed

angular-material2

angular