У меня есть html-таблица объектов, и так же есть кнопка для редактирования объекта, а еще добавить объект в таблицу, они должны открывать модальное окно: [UI][1].
Я реализовал добавление через модальное окно следующим образом:
@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 = {
id: 0,
name: '',
model: '',
range_from: 0,
range_to: 0,
type: '',
unit: '',
location: '',
description: ''
}
@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(){
this.onModal.emit(false)
}
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-файла:
<app-add-sensor-modal
[active]="addSensorModalActive"
(onModal)="changeAddSensorModal($event)"
(onSensors)="addSensor($event)"
></app-add-sensor-modal>
Итак, это работает отлично, но теперь у меня появилась необходимость редактировать объекты и мне нужно вызывать эту же модалку, но заполненную уже полями определенного объекта
<tr class="table-body-line" *ngFor="let sensor of sensors.slice(currentPage*4, currentPage*4 + 4)">
<td class="edit-sensor">
<button class="edit-item">✎</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>
Как мне это реализовать, если я модальное окно поставлю снова в конец html, то я не смогу туда передать sensor, а в цикл ее не вставишь? [1]: https://i.stack.imgur.com/d9E2o.png