我创建了一个数字选择器组件：
模板：
<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); 在我的代码中）
2- 当我得到 ngbTooltip prono.stats value => "get Value()" for all values 也被触发！
- 为什么 ngbTooltip 触发了我的 numberpicker 组件的“获取值”？！！！
- 为什么当我只增加/减少一个值时会触发“获取值”？！
请帮助我改进我的代码。
硬币币22
也许，问题就在这里：
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NumberPickerComponent),
multi: true
}
]