Несколько диалоговых окон, для l oop, открытие - angular 7 + angular материал

Question

У меня есть ситуация, когда я получаю из массива API String кодов проверки. Также у меня есть mapper, где я получаю описание для кода на лицевой стороне.

Вопрос в том, есть ли возможность отобразить диалоговое окно материала после закрытия предыдущего?

Мой код:

.subscribe((res:string[]) => {
            console.log("res: ", res);

            let dialogRef: MatDialogRef<ValidationDialog>;

            for (let i = 0; i < res.length; i++) {
              const code = res[i];
              const description = this.locale.getDescription(code);

              let config      = new MatDialogConfig();
                  config.data = {code: code, description: description.value};

              console.log("dialogRef: ", dialogRef);



                dialogRef = this.dialog.open(ValidationDialog, config);
                console.log("--Dialog--");
                console.log("Data: ", config.data, this.dialog);
                dialogRef.afterClosed().subscribe(data => {
                  console.log("data returned from mat-dialog-close is ", data);
                });

С оператором if, где я проверяю dialogRef, я получаю только один диалог, без него, как в примере, я открыл все диалоги одновременно.

Пожалуйста, для совета,

Answer 1

Если я правильно понимаю, вы хотите открывать диалоги один за другим для каждого элемента массива, который вы возвращаете?

private doSomething(): void {
  this.something.subscribe((res: string[]) => {
    this.showDialog(res, 0);
  });
}

private showDialog(data: string[], idx: number): void {
  if (i >= data.length) return; // finished processing list

  const item = data[i];
  // setup...

  const dialog = this.dialog.open(ValidationDialog, config);
  const sub = dialog.afterclosed()
    .subscribe((data) => {
      sub.unsubscribe();
      console.log(`Data from closed dialog: ${data}`);
      console.log('Opening next dialog...');
      this.showDialog(data, idx + 1); // recursively open next dialog
    });
}