0

У меня есть 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">&#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>

Как мне это реализовать, если я модальное окно поставлю снова в конец html, то я не смогу туда передать sensor, а в цикл ее не вставишь? [1]: https://i.stack.imgur.com/d9E2o.png

1 ответ 1

0

Можно сделать так:

export class AddSensorModalComponent implements OnInit {
// Добавляем поле для хранения текущего значения
    currentsSensor?: any; // Лучше типизировать
...
}

Далее, в html:

<tr class="table-body-line" *ngFor="let sensor of ...">
    <td class="edit-sensor">
        <button class="edit-item" (click)="showEditDialog(sensor)">&#9998;</button>
    </td>
    ...
</tr>

Теперь снова ts:

...
    showEditDialog(sensor: any): void {
        this.currentSensor = sensor;
        this.addSensorModalActive = true;
    }
...

И надо добавить поле для текущего сенсора в компонент диалога

<app-add-sensor-modal
    [active]="addSensorModalActive"
    [sensor]="currentSensor"
    (onModal)="changeAddSensorModal($event)"
    (onSensors)="addSensor($event)"
></app-add-sensor-modal>

Внутри компонента диалога, само собой, проверять валиден текущий сенсор, или нет и действовать по ситуации

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.