Проблема с ControlValueAccessor - Получение значения запущено

Question

Я создал компонент выбора номера:

шаблон:

<div class="input-group mb-3 input-md">
  <div class="input-group-prepend">
    <span class="input-group-text decrease" (click)="decrease();">-</span></div>
  <input [name]="name" [(ngModel)]="value" class="form-control counter" type="number" step="1">
  <div class="input-group-prepend">
    <span class="input-group-text increase" (click)="increase();" style="border-left: 0px;">+</span></div>
</div>

ts файл:

@Component({
  selector: 'app-number-picker',
  templateUrl: './numberPicker.component.html',
  styleUrls: ['./numberPicker.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumberPickerComponent),
      multi: true
    }
  ]
})
export class NumberPickerComponent implements ControlValueAccessor {

  @Output() scoreChange = new EventEmitter<number>();
  @Input()
  name: string;
  @Input() isAdmin: boolean;
  @Input() val: number;
  onChange: any = () => { };
  onTouched: any = () => { };

  get value() {
    console.log(this.val);
    return this.val;
  }

  set value(val) {
    this.val = val;
    this.onChange(val);
    this.onTouched();
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  writeValue(value) {
    if (value !== null && value !== undefined) {
      this.value = value;
    }
  }

  decrease() {
    if (this.value === 0 || this.value === null) {
      if (this.isAdmin) {
        this.value = null;
      } else {
        this.value = 0;
      }
    } else {
      this.value--;
    }
    this.valueIsChanged(this.value);
  }

  increase() {
    if (isNaN(this.value) || this.value === null) {
      this.value = 0;
    } else {
      this.value++;
    }
    this.valueIsChanged(this.value);
  }

  valueIsChanged(value: number) {
    this.scoreChange.emit(value);
  }
}

Этот компонент используется в ngFor в другом компоненте

<div let prono of pronos;>
    <app-number-picker [isAdmin]="false" (scoreChange)="prono.pronoEq1 = $event" name="pronoE1" [(ngModel)]="prono.pronoEq1" #score="ngModel"></app-number-picker>
    <app-number-picker [isAdmin]="false" (scoreChange)="prono.pronoEq2 = $event" name="pronoE2" [(ngModel)]="prono.pronoEq2" #score="ngModel"></app-number-picker>
<span [ngbTooltip]="prono.stats">Stats</span>
</div>

1 - Это работает, но когда я меняю значение с помощью функции увеличения, например: - Все "get Value ()" для всех значений запускаются (console.log (this.val); в моем code)

2- Когда я получаю ngbTooltip prono.stats value => «get Value ()» для всех значений, также запускается!

• Почему ngbTooltip запустил «get Value» мой компонент numberpicker? !!!
• Почему срабатывает "get Value", когда я увеличиваю / уменьшаю только одно значение?!

Пожалуйста, помогите мне улучшить мой код.

coincoin22

Возможно, проблема здесь:

providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumberPickerComponent),
      multi: true
    }
  ]

Answer 1

Я удалил функцию получения и установки, и она работает! Волхвы c; -)