angular - 如何使用 ElementRef 获得选定的选项？

Question

我有一个表，我可以使用添加按钮向表中添加动态行。

为了构建这个表，我采用了数组形式。

每行都有一个带有选项列表的选择框

设想

一旦用户从选择框中选择了一个选项，并且当他下次单击添加按钮添加新行时，应禁用先前的选择选项。

我能够在代码下方获得选定的选项值形式

  @ViewChild('mySelect') mySelect: ElementRef;

但它总是给我第一行选择的选项。

Answer 1

您不应该使用它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)
}

堆栈闪电战

注意 - 这是一个非常基本的示例，请对此发表评论，以便我可以帮助您构建复杂的示例