Question

我是Angular的新手，并尝试遵循生命周期挂钩，但是显然，我并不完全了解它们。

在我的项目中，模态窗口中包含一个单选按钮组。根据用户要求通过单击按钮打开模态，因此不会自动进行。显示窗口时，默认情况下需要选择每月选项。

当打开模式窗口时，在开发工具控制台中出现以下错误：

ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：'focus：undefined'。当前值：“ focus：true”。

我尝试过的事情：

在模式打开时，手动将广播组设置为模糊。
在模式打开之前，手动将广播组设置为模糊。
使用ChangeDetectorRef进行模态打开之前和之后，以更新所有更改。

在这一点上，我很困惑，希望能得到一些指导。

带单选按钮组的模式的HTML：

  <ng-template #subscriptionOptions let-modal>
    <form #subForm='ngForm'>
    <div class="modal-body" id="subInfo">
      <section class="widget">

          <h4>
            <fa-icon [icon]="['far','check-square']"></fa-icon>
            {{ currentUser.firstName }}, please choose and activate your subscription
          </h4>

        <div name="subType" id="subType" class="btn-group btn-group-toggle" ngbRadioGroup [(ngModel)]="subType" style="margin-left: 117px">
          <label class="BG-Def" ngbButtonLabel>
            <input name="monthly" id="monthly" type="radio" [value]="'monthly'" ngbButton  (click)="subType = 'monthly'">
            Pay Monthly
          </label>
          <label class="BG-Def" ngbButtonLabel>
            <input name="annual" id="annual" type="radio" [value]="'annual'" ngbButton  (click)="subType = 'annual'">
            Pay Annualy (Save 20%)
          </label>
        </div>


              <div class="row">
                <div class="col-md-8 col-md-offset-3">
                  <button type="submit" class="btn btn-danger">Activate Subscription</button>
                  <button type="button" class="btn btn-default" (click)="closeSubOptions()">Cancel</button>
                </div>
              </div>



      </section>
    </div>
    </form>
  </ng-template>

我在构造函数中设置subType值：

constructor(private modalDialogService: ModalDialogService) {
this.subType = 'monthly';
}

然后这是我打开模式本身的方式：

HTML按钮：

(click)="this.openSubOptions(subscriptionOptions)"

打字稿：

  public openSubOptions(modal) {
      this.modalService.open(modal, {size: 'lg', windowClass: 'subModal'});
  }

ngOnInit和ngAfterViewInit

public ngOnInit() {
    this.passChange = false;
    this.navBar.updateUser.subscribe((result) => {
      this.currentUser = this.auth.getLoggedInUser();
    });
    this.currentUser = this.auth.getLoggedInUser();
    this.getSessionExpiration();
    this.timer = setInterval(() => {
      this.onTimeoutTick();
    }, 1000);
    this.dialogCallback.subscribe(() => this.resetTimer());
  }

  public ngAfterViewInit() {
    this.cd.detectChanges();
  }

Answer 1

我最终在我的广播组之外找到了围绕抽奖重点的作品。

我在无线电组之前添加了一个不可见的输入，似乎可以防止发生更改错误。

<input type="text" style="display:none" />

使用单选按钮组打开角度模态窗口会导致ExpressionChangedAfterItHasBeenCheckedError

1 个答案: