Angular 使用单选按钮组打开角度模式窗口会导致ExpressionChangedTerithasBeenCheckedError

我对Angular还不熟悉，并且尝试过跟随生命周期挂钩，但显然，我并不完全理解它们

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

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

ExpressionChangedTerithasBeenCheckedError:检查后，表达式已更改。上一个值：“焦点：未定义”。当前值：“焦点：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>

下面是我如何打开模态本身：

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();
  } 

---

最后，我找到了一份工作，把焦点从我的广播组转移开

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

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

在哪里设置焦点布尔值？在ngOnInit还是ngAfterViewInit？Angela，就是这样。我根本没有在代码中设置焦点。有关我的ngOnInit和AfterViewinit，请参见底部的编辑。

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