Пропсы к компонент передаются не так, как ожидалось
Смотрите, у меня есть компонент, который рисует таблицу объектов, так же в нем есть кнопка добавить новый объект и у каждого объекта есть кнопка 'изменить'. Добавление и изменение я реализовал, но пропс в компонент передается неожидаемым образом. Вот основные поля и функции, которые есть в компоненте таблицы:
@Component({
selector: 'app-sensors-table',
templateUrl: './sensors-table.component.html',
styleUrls: ['./sensors-table.component.css']
})
export class SensorsTableComponent{
currentSensor: ISensor = {
id: 0,
name: '',
model: '',
range_from: 0,
range_to: 0,
type: '',
unit: '',
location: '',
description: ''
}
addSensorModalActive: boolean = false
changeAddSensorModal(val: boolean){
this.addSensorModalActive = val;
}
showEditDialog(sensor: ISensor){
this.currentSensor = sensor
this.addSensorModalActive = true
console.log(this.currentSensor)
}
}
...ets
Вот компонент модалки:
@Component({
selector: 'app-add-sensor-modal',
templateUrl: './add-sensor-modal.component.html',
styleUrls: ['./add-sensor-modal.component.css']
})
export class AddSensorModalComponent implements OnInit{
@Input() active: boolean
@Input() sensor: ISensor
@Output() onModal = new EventEmitter<boolean>()
@Output() onSensors = new EventEmitter<ISensor>()
sensorTypes = [
{name: "Pressure", value: "Pressure"},
{name: "Voltage", value: "Voltage"},
{name: "Temperature", value: "Temperature"},
{name: "Humidity", value: "Humidity"}
]
sensorUnits = [
{name: "Bar", value: "bar"},
{name: "Voltage", value: "voltage"},
{name: "Degree", value: "°С"},
{name: "Percent", value: "%"}
]
form: FormGroup
ngOnInit(): void {
this.fillForm()
}
closeModal(){
console.log(this.sensor)
this.onModal.emit(false)
this.onSensor.emit({
id: 0,
name: '',
model: '',
range_from: 0,
range_to: 0,
type: '',
unit: '',
location: '',
description: ''
})
}
addSensor(){
let sensor: ISensor = getSensorFromForm(this.form)
this.onSensors.emit(sensor)
this.closeModal()
this.fillForm()
}
private fillForm(){
this.form = new FormGroup({
name: new FormControl(this.sensor.name),
model: new FormControl(this.sensor.model),
range_from: new FormControl(this.sensor.range_from),
range_to: new FormControl(this.sensor.range_to),
type: new FormControl(this.sensor.type),
unit: new FormControl(this.sensor.unit),
location: new FormControl(this.sensor.location),
description: new FormControl(this.sensor.description)
})
}
}
И вот html-шаблон таблицы:
<tr class="table-body-line" *ngFor="let sensor of sensors.slice(currentPage*4, currentPage*4 + 4)">
<td class="edit-sensor">
<button class="edit-item" (click)="showEditDialog(sensor)">✎</button>
</td>
<td class="table-body-col name">{{sensor.name}}</td>
<td class="table-body-col">{{sensor.model}}</td>
<td class="table-body-col">{{sensor.type}}</td>
<td class="table-body-col">{{sensor.range_from}}-{{sensor.range_to}}<span *ngIf="sensor.unit == '%'">%</span></td>
<td class="table-body-col">{{sensor.unit}}</td>
<td class="table-body-col">{{sensor.location}}</td>
<td class="delete-sensor">
<button
class="delete-item"
(click)="deleteSensor(sensor)"
>✖</button>
</td>
</tr>
<app-add-sensor-modal
[active]="addSensorModalActive"
[sensor]="currentSensor"
(onModal)="changeAddSensorModal($event)"
(onSensors)="addSensor($event)"
(onSensor)="changeCurrentSensor($event)"
></app-add-sensor-modal>
Задумка в том, что в компоненте модального окна есть поле sensor и при изменении объекта, полю currentSensor присваивается выбранный для редактирования сенсор, и он же передается как props в модальное окно в поле sensor, то есть по задумке при нажатии на edit, в модальном окне будет уже не пустой sensor, а тот, что лежит в currentSensor, но по факту я открываю окно и там пустые значения. Вот данные из консоли при нажатии на кнопку изменить+, что в методах showEditDialog()(в таблице), closeModal()(в модальном окне):
