角度6变量值未在视图中反映

Question

我创建了拖放功能，在其中放置HTML元素，然后单击“编辑”按钮对其进行编辑，这一次它对所有元素均适用，问题出在我进入新页面进行检查时预览，然后返回到设计器页面，则不显示弹出窗口，但组件中变量的值正在更改，但视图中未显示此修改后的值，因此我无法编辑该元素的选项。 变量是在组件中更改但在视图中未更改的原因可能是什么？

这是我的代码 frm-builder.component.html

<div class="pop-up {{editOpts}}" id="">
  <span (click)="closePopup()" class="close"><i class="fas fa-times"></i></span>
  <form [formGroup]="frmElemProp" novalidate (ngSubmit)="changeProps($event)">
    <h2>Field Settings</h2>
    <div *ngIf="!( tabContainer || panelContainer ) ">

      <div>
        <label><span>Hide If </span><input type="text" name="hideCondition" readonly disabled /></label>
      </div>
      <div>
        <label><span>Read Only If </span><input type="text" name="readonlyCondition" readonly disabled /></label>
      </div>
      <div>
        <label>
          <span>Is Required</span>
          <!-- <input type="checkbox" name="fieldRequire" formControlName="fieldRequire" [checked]="frmElemProp.fieldRequire" value="true" /> Required -->
          <select name="fieldRequire" formControlName="fieldRequire">
            <option value="true">Required</option>
            <option value="false">Optional</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          <span>Field Label/text</span>
          <input type="text" name="fldLabel" formControlName="fieldLbl" />
        </label>
      </div>
      <div>
        <label>
          <span>Field Name</span>
          <input type="text" name="fieldName" formControlName="fieldName" />
        </label>
      </div>
      <div>
        <label>
          <span>Data Source</span>
          <select name="datasource" formControlName="datasource">
            <option>Fields from dictionary - comming soon</option>
          </select>
        </label>
      </div>
      <div *ngIf="!showOpt">
        <label>
          <span>Placeholder Text</span>
          <input type="text" name="fieldPlaceholder" formControlName="fieldPlaceholder" />
        </label>
      </div>
      <div *ngIf="showMaxLen">
        <label>
          <span>Max Number Of Characters</span>
          <input type="number" name="fieldMaxLen" formControlName="fieldMaxLen" />
        </label>
      </div>
      <div *ngIf="showOpt">
        <label>
          <span>Value Options</span>
          <textarea name="fieldOptions" rows="3" formControlName="fieldOptions"></textarea>
          <span>&nbsp;</span><span style="width:60%;">Separate Option With New Line</span>
        </label>
      </div>

    </div>
    <!-- {{ tabContainer }} -->
    <div *ngIf="tabContainer">
      <div>
        <label>
          Label for Tab 1
          <input type="text" name="TabEarNames_1" formControlName="TabEarNames_1" />
        </label>
        <label>
          Label for Tab 2
          <input type="text" name="TabEarNames_2" formControlName="TabEarNames_2" />
        </label>
      </div>
    </div>

组件 frm-builder.component.ts

 public editElem(event) {
    console.log(event);
    var parentElementObj = event.target.parentElement.parentElement.parentElement;
    console.log(parentElementObj);
    if ( parentElementObj.className == 'container' ) {
      return;
    }
    // setTimeout()
    this.editOpts = 'show';

    setTimeout( () => this.editOpts = 'show', 0);
    this.sanitizer.bypassSecurityTrustHtml(this.editOpts);
    this.changeDetectorRef.markForCheck();
    // this.changeDetectorRef.checkNoChanges(); <---- When us this I get an error `ERROR Error: "ViewDestroyedError: Attempt to use a destroyed view: detectChanges"`
    setTimeout( () => this.changeDetectorRef.detectChanges(), 10);
    console.log(" this.editOpts : ",this.editOpts);
    // if (!(this.changeDetectorRef as ViewRef).destroyed) {
    //   this.changeDetectorRef.detectChanges()
    //   // do other tasks
    // }

    this.panelContainer = false;
    this.showOpt = false;
    this.showMaxLen = false;
    this.tabContainer = false;

    var cssCls = parentElementObj.className.replace(' frmElement', '');
    var cssCls = cssCls.replace(' active', '');
    console.log(cssCls);
    if (this.optionElems.indexOf(cssCls) > -1) {
      this.showOpt = true;
    } else {
      this.showMaxLen = true;
    }
    if (cssCls == 'tabContainer') {
      this.tabContainer = true;
    }
    if (cssCls == 'Containerbox') {
      this.panelContainer = true;
    }

    if ( 'right' != parentElementObj.id ) {
      this.frmElemProp.controls['fieldId'].setValue(parentElementObj.id);
      // making other fields empty
      this.frmElemProp.controls['fieldLbl'].setValue('');
      this.frmElemProp.controls['fieldName'].setValue('');
      this.frmElemProp.controls['fieldPlaceholder'].setValue('');
      this.frmElemProp.controls['fieldMaxLen'].setValue(0);
      this.frmElemProp.controls['fieldOptions'].setValue('');
      this.frmElemProp.controls['fieldRequire'].setValue('false');
      this.frmElemProp.controls['TabEarNames_1'].setValue('');
      this.frmElemProp.controls['TabEarNames_2'].setValue('');
      this.frmElemProp.controls['panelNames'].setValue('');
      this.frmElemProp.controls['datasource'].setValue('');

      // checking the selected id is available in 
      if ( this.formFields.indexOf( [parentElementObj.id] ) < 0 ) {
        this.formFields[parentElementObj.id] = this.panelBox;
      }

      if ( !isNullOrUndefined( this.formFields[parentElementObj.id].fieldLbl )) {
        this.frmElemProp.controls['fieldLbl'].setValue(this.formFields[parentElementObj.id].fieldLbl);
      }
      this.frmElemProp.controls['fieldName'].setValue(this.formFields[parentElementObj.id].fieldName);
      this.frmElemProp.controls['fieldPlaceholder'].setValue(this.formFields[parentElementObj.id].fieldPlaceholder);
      this.frmElemProp.controls['fieldMaxLen'].setValue(this.formFields[parentElementObj.id].fieldMaxLen);
      this.frmElemProp.controls['fieldOptions'].setValue(this.formFields[parentElementObj.id].fieldOptions);
      this.frmElemProp.controls['fieldRequire'].setValue(this.formFields[parentElementObj.id].fieldRequire);

    }
}