Angular @Input и @output Conflict ⇐ Html

[Anonymous]

Я сделал директиву в угловой, которая действует как ввод времени и в шаблоне компонента, я повторил ее на основе массива строки.
Директива имеет @Input, который является начальным значением, которое установлено для директивного значения ElementRef. Кроме того, директива имеет @output, который излучает значение elementRef.
Все идет хорошо, если я не хочу получить испущенное значение из директивы и установить его в массив, который является источником повторения для директивы.

Код: Выделить всё

import {Component} from '@angular/core';
@Component({
templateUrl:'./home.component.html',
styleUrls:['./home.component.css']
})
export class HomeComponent{
timeArray:string[] = ['01:25','00:00','10:10','00:00','00:00'];

onTimeChanging(arrayIndex : number,time:string){
//problem occure in the following line
this.timeArray[arrayIndex] = time;
}
}
< /code>
Компонент HTML -файл < /p>




[list]
[*]{{time}}
[/list]
< /code>
Директива TS File < /p>
    import { Directive,ElementRef,EventEmitter,HostListener,Input, Output } from "@angular/core";

@Directive({
selector:'[timeInput]'
})
export class TimeInputDirective{
@Input('timeInput') initialValue: string = '00:00';
@Output() changeTime = new EventEmitter();

constructor(private elementRef:ElementRef){
this.elementRef.nativeElement.className = 'timeInput';
}

ngAfterViewInit(){
this.elementRef.nativeElement.value = this.initialValue
}

@HostListener('keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
if (event.key != 'Tab') {
event.preventDefault();
let value = this.elementRef.nativeElement.value;
let valuePart;

switch (event.key) {
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
if ((this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart) < value.indexOf(':')) {
valuePart = (value.substring(0, value.indexOf(':')) + event.key).substring(3, 1);
valuePart = valuePart > '24' ? '0' + valuePart.substring(2, 1) : valuePart;

this.elementRef.nativeElement.value = `${valuePart}:${value.substring(value.indexOf(':') + 1)}`;

this.elementRef.nativeElement.selectionStart = 0;
this.elementRef.nativeElement.selectionEnd = 2;
} else {
valuePart = (value.substring(value.indexOf(':') + 1) + event.key).substring(3, 1);
valuePart = valuePart > '59' ? '00' : valuePart;

this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:${valuePart}`;

this.elementRef.nativeElement.selectionStart = 3;
this.elementRef.nativeElement.selectionEnd = 5;
}
break;
case 'ArrowUp':
if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < value.indexOf(':')) {
valuePart = (+value.substring(0, value.indexOf(':')) + 1).toString();
valuePart = ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1) > '24' ? '00' : ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1);

this.elementRef.nativeElement.value = `${valuePart}:${value.substring(value.indexOf(':') + 1)}`;

this.elementRef.nativeElement.selectionStart = 0;
this.elementRef.nativeElement.selectionEnd = 2;
} else {
valuePart = (+value.substring(value.indexOf(':') + 1) + 1).toString();

if (valuePart   24) {
this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:00`;
} else {
this.elementRef.nativeElement.value = `${('0' + hourPart).substring(hourPart.toString().length + 1, hourPart.toString().length - 1)}:${('0' + (+valuePart % 60)).substring((+valuePart % 60).toString().length + 1, (+valuePart % 60).toString().length - 1)}`
}
}

this.elementRef.nativeElement.selectionStart = 3;
this.elementRef.nativeElement.selectionEnd = 5;
}
break;
case 'ArrowDown':
if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < value.indexOf(':')) {
valuePart = (+value.substring(0, value.indexOf(':')) - 1).toString();
valuePart = ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1) < '00' ? '24' : ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1);

this.elementRef.nativeElement.value = `${valuePart}:${value.substring(value.indexOf(':') + 1)}`;

this.elementRef.nativeElement.selectionStart = 0;
this.elementRef.nativeElement.selectionEnd = 2;
} else {
valuePart = (+value.substring(value.indexOf(':') + 1) - 1).toString();
valuePart = ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1) < '00' ? '59' : ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1);

this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:${valuePart}`;

this.elementRef.nativeElement.selectionStart = 3;
this.elementRef.nativeElement.selectionEnd = 5;
}
break;
case 'ArrowLeft':
if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart > this.elementRef.nativeElement.value.indexOf(':')) {
this.elementRef.nativeElement.selectionStart = 0;
this.elementRef.nativeElement.selectionEnd = 2;
}
break;
case 'ArrowRight':
if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < this.elementRef.nativeElement.value.indexOf(':')) {
this.elementRef.nativeElement.selectionStart = 3;
this.elementRef.nativeElement.selectionEnd = 5;
}
break;
case 'Delete':
if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < value.indexOf(':')) {
this.elementRef.nativeElement.value = `00:${value.substring(value.indexOf(':') + 1)}`;
this.elementRef.nativeElement.selectionStart = 0;
this.elementRef.nativeElement.selectionEnd = 2;
} else {
this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:00`;
this.elementRef.nativeElement.selectionStart = 3;
this.elementRef.nativeElement.selectionEnd = 5;
}
break;
}
}

if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'ArrowUp', 'ArrowDown', 'Delete'].includes(event.key)) {
this.changeTime.emit(this.elementRef.nativeElement.value);
}
}
}

Я был бы очень признателен, если кто -то сможет мне помочь.

Подробнее здесь: https://stackoverflow.com/questions/796 ... t-conflict