Как получить выбранный вариант с помощью ElementRef?

У меня есть таблица, в которой я могу добавлять динамические строки в таблицу с помощью кнопки ДОБАВИТЬ.

Для построения этой таблицы я взял массив формы.

В каждой строке есть поле выбора со списком параметров.

сценарий

после того, как пользователь выбрал параметр в поле выбора и когда он щелкнул кнопку «ДОБАВИТЬ», чтобы добавить новую строку, в следующий раз предыдущий параметр выбора должен быть отключен.

Я могу получить форму значения выбранного параметра под кодом

  @ViewChild('mySelect') mySelect: ElementRef;

Но он всегда дает мне возможность выбора первой строки только всегда.


angular viewchild elementref
person Bikshu s    schedule 22.04.2020    source источник
comment
не вдаваясь в суть того, что вам, вероятно, следует подумать о том, чтобы сделать это по-другому, но вы пробовали @ViewChildren?   -  person Poul Kruijt    schedule 22.04.2020
comment
@ViewChildren также дает тот же результат, но в виде списка.   -  person Bikshu s    schedule 23.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы не должны использовать ElementRef для достижения этого, поскольку вы не сможете управлять своими данными в component.ts, вы можете просто нажать пустой объект, как показано ниже,

<table>

    <tr>
        <th>Gender</th>
    </tr>
    <tr *ngFor="let row of array">
        <td>
            <select [(ngModel)]="row.gender">
        <option value="male">Male</option>
        <option value="female"> Female</option>
      </select>
        </td>
    <td>
      <button (click)="addNewItem()">Add New</button>
    </td>

    </tr>
</table>

Машинописный код

array=[{
    gender:'male'
  }]

addNewItem(){
  const newItem={
     gender:''
  }
  this.array.push(newItem)
}

stackblitz

Примечание. Это очень простой пример, прокомментируйте его, чтобы я мог помочь вам создать сложные.

person Aravind    schedule 22.04.2020