Angular: При создании селекта с помощью ngFor, одинаковые опции у всех селектов

Question

Моя задача это создать шаблон селекта и позже с помочью DragDrop CDK копировать его в мой компонент сколько угодно раз с возможностью изменять опции. Проблема в том что мой шаблон работает на определённом масиве с сервиса. И когда я создаю копии то они ссылаются на тот же массив а значит при изменении любого из них, меняются все. Мне же надо чтобы я мог каждый изменять отдельно, не затрагивая шаблон и остальные.

Код самого шаблона:

<ng-template #selectField>
  <mat-card>
    <select>
      <option
        *ngFor="let item of service.selectOptions; index as i"
        id="{{ i }}">
        {{ item }}
      </option>
    </select></mat-card>
</ng-template>

В самом дроп компоненте я создал 3 кнопки которые позволяют изменить массив

changeOption(arg: number) {
    let inputElement = this.target as HTMLSelectElement;
    this.service.optionChange(
      arg,
      inputElement.selectedIndex,
      this.placeholderText.value
    );

А в сервисе у меня сам массив и обработка кнопок

selectOptions: string[] = ['Option 1', 'Option 2'];
  optionChange(arg: number, id: number, value: string) {
    switch (arg) {
      case 1:
        this.selectOptions[id] = value;
        break;
      case 2:
        this.selectOptions.push(value);
        break;
      case 3:
        this.selectOptions.splice(id, 1);
        break;
      default:
        console.log('Unexpected arguments.');
        break;
    }
  }

Было бы неплохо будь возможность изменить целлый массив на который ссылается ngFor но я не уверен есть ли такая возможность.

Answer 1

Я нашёл выход из ситуации. Массив я так и не трогал, но вот кнопки больше не изменяют его, вместо этого они напрямую влияют на структуру селекта и самих опций.

changeOption(arg: number) {
    let inputElement = this.target as HTMLSelectElement;
    switch (arg) {
      case 1:
        inputElement.options[inputElement.selectedIndex].value =
          this.placeholderText.value;
        inputElement.options[inputElement.selectedIndex].innerHTML =
          this.placeholderText.value;
        break;
      case 2:
        let opt: HTMLOptionElement = document.createElement('option');
        opt.value = this.placeholderText.value;
        opt.innerHTML = this.placeholderText.value;
        inputElement.add(opt);
        break;
      case 3:
        inputElement.remove(inputElement.selectedIndex);
        break;
      default:
        console.log('Unexpected arguments.');
        break;
    }
  }

БЛОГ НА HUSL

Angular: При создании селекта с помощью ngFor, одинаковые опции у всех селектов

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