Angular 8 - выражение было изменено после его проверки

Question

Я пытаюсь создать свой собственный компонент переключателя с двумя способами привязки и использовать его в другом компоненте:

my-custom-component.ts:

import { Component, Input, Output, DoCheck, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-buttons-radio',
  templateUrl: './buttons-radio.component.html',
  styleUrls: ['./buttons-radio.component.css'],
})

export class ButtonsRadioComponent implements DoCheck {
  @Input() options: ButtonRadioItem[];
  @Input() value;
  @Output() valueChange: EventEmitter<number> = new EventEmitter();

  ngDoCheck() {
    this.valueChange.next(this.value);
  }
}

my-custom -component. html:

<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="value">
  <ng-container *ngFor="let v of options">
    <label ngbButtonLabel class="btn-primary">
      <input ngbButton type="radio" [(value)]="v.value">{{v.key}}
    </label>
  </ng-container>
</div>

использование в компоненте my-parent. html:

<app-buttons-radio [options]="sourceButtonsRadio" [(value)]="sourceValue"></app-buttons-radio>

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

Я уже пытался вставьте changeDetectorRef в мой пользовательский компонент и используйте метод changeDetectorRef.detectChanges(), но все равно получил ошибку. Как я могу обработать эту ошибку?

Answer 1

Благодаря @ poul-kruijt, изменил мой код в соответствии с предложениями в комментариях. правильный код:

my-custom-component.ts:

...
export class ButtonsRadioComponent implements DoCheck {
  @Input() options: ButtonRadioItem[];
  @Input() value;
  @Output() valueChange: EventEmitter<number> = new EventEmitter();

  ngDoCheck() {
    this.valueChange.next(this.value);
  }
}

my-custom-component. html:

<div class="btn-group btn-group-toggle"
     ngbRadioGroup name="radioBasic" [(ngModel)]="value" (ngModelChange)="valueChanged($event)">
      ...
</div>

использование в my-parent компонентная html:.