Question

当我在下拉列表中选择一个项目时，我想在Angular中获取选定的文本。

请注意，我希望在下拉列表中没有任何onchange事件的情况下获得文本。我使用查询选择器来获取Dropdownlist的值，并且事件是button和form标记内的button。这是我的代码

const ddldepartment = target.querySelector('#ddldepartment').value;
const ddldesignation = target.querySelector('#ddldesignation').value;

在这里，我得到了像1和2这样的值而没有得到文本。而我正在使用

<form (submit)="PostEmployee($event)">

和

PostEmployee(event) {
    const ddldepartment = target.querySelector('#ddldepartment').value;
    const ddldesignation = target.querySelector('#ddldesignation').value;
}

这是我的下拉列表的HTML代码：

<select id="ddldepartment" [(ngModel)]="ddldepartment" name='ddlbankcode' style="width: 70%">
    <option value=0>Choose...</option>
    <option class='option' *ngFor="let dept of department" [value]="dept.dept_code">
      {{dept.dept_name}}
    </option>
</select>

我在控制台中获得了价值。我想获取文字。我怎么找到它？

Answer 1

您已经在使用[(ngModel)]="ddldepartment"。因此，您将已经在ddldepartment属性中拥有选定的值。

您需要做的就是使用[ngValue]="dept.dept_name"

赞：

<form (submit)="postEmployee()">
  ...
  <select 
    id="ddldepartment" 
    [(ngModel)]="ddldepartment" 
    name='ddlbankcode'>
    <option value='null'>Choose...</option>
    <option 
      class='option' 
      *ngFor="let dept of department" 
      [ngValue]="dept.dept_name">
      {{ dept.dept_name }}
    </option>
  </select>
  ...
  <button>Submit</button>
</form>

所以在你的班上：

postEmployee() {
  // This will give you the selected department name text
  console.log(this.ddldepartment);
}

这是您推荐的Sample StackBlitz。

DropDownlist在Angular 6中单击“提交”按钮时选择的文本

1 个答案: