Пропсы к компонент передаются не так, как ожидалось

Смотрите, у меня есть компонент, который рисует таблицу объектов, так же в нем есть кнопка добавить новый объект и у каждого объекта есть кнопка 'изменить'. Добавление и изменение я реализовал, но пропс в компонент передается неожидаемым образом. Вот основные поля и функции, которые есть в компоненте таблицы:

@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)">&#9998;</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)"
          >&#10006;</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()(в модальном окне): введите сюда описание изображения


Ответы (0 шт):