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

Question

Я пытаюсь настроить диалог Mat вместо того, чтобы создавать другое диалоговое окно, чтобы исправить мою проблему. Я пытаюсь показать раскрывающийся список в одном экземпляре диалогового окна, а в другом - я хочу, чтобы он скрывал раскрывающийся список в зависимости от того, получает ли он данные из местоположения, из которого он был активирован.

В настоящее время у меня есть это диалоговое окно на двух разных страницах, одна внутри сетки, чтобы иметь возможность создавать новых получателей, и другая внутри диалогового окна, чтобы создавать новых получателей.

В одной локации я получаю сообщение об ошибке:

core.js:7187 ERROR TypeError: Cannot destructure property `FK_Task` of 'undefined' or 'null'.
    at new AddRecipientComponent(add-recipient.component.ts:22)

Вторая локация работает нормально, как и положено.

Мой вопрос заключается в том, как обрабатывать вводимые нулевые данные в диалоговом окне @Inject(MAT_DIALOG_DATA){FK_Task }

Или есть ли лучший способ сделать диалоговое окно настраиваемым для скрытия и отображения поля?

Я знаю, что могу решить эту проблему, создав новый компонент, но я хотел найти более эффективные методы вместо создания нового компонента, и я хочу сделать свои компоненты настраиваемыми.

Первое местоположение, я не внедряю данные, когда я открываю диалог, как это:

 openAddRecipientComponent() {
this.dialog.open(AddRecipientComponent).afterClosed().subscribe(result => {
            this.getRecipients(); 
          });
        } 

Второе местоположение, я внедряю данные, когда я открываю диалог, как это:

 openAddRecipientComponent() {
          this.dialog.open(AddRecipientComponent, {
            data: {
              FK_Task:this.pk_Task,
            }   
          }).afterClosed().subscribe(result => {
            this.getRecipients(); 
          });
        }

Я добавил это в свой конструктор внутри AddRecipientComponent, который получает данные.

  fk_Task;
 constructor( private dialogRef: MatDialogRef<AddRecipientComponent>, 
     @Inject(MAT_DIALOG_DATA){FK_Task }
     ) { 
      this.fk_Task = FK_Task;

    }

Таким образом, когда я открою компонент, то способ, которым я собираюсь показать свой раскрывающийся список, будет зависеть от того, является ли FK_Task пустым или нет, используя этот метод, который я создал, который я добавил в метод ngOnInt ().

      showRecipientTypes () {
        if (this.fk_Task) {
        this.showItem =true;
        }
      }

  ngOnInit() {
    this.getRecipientTypes();
    this.showRecipientTypes();
  }

В моем раскрывающемся списке HTML я использую * ngIf = "this.showItem", чтобы показать раскрывающийся список.