Angular DropDownlist在提交按钮单击时列出所选文本

当我在Dropdownlist中选择一个项目时，我希望以角度获取所选文本

请注意，我希望在Dropdownlist中获取文本，而不包含任何

onchange

事件。我使用查询选择器来获取Dropdownlist的值，事件是button和button in form标记。这是我的密码

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

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

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

以下是我的dropdownlist的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>

选择。。。
{{dept.dept_name}

---

我在控制台中获得了价值。我想发短信。如何找到它？

您已经在使用

[（ngModel）]=“ddldepartment”

。因此，您在

ddldDepartment

属性中已经有了所选的值

您只需使用

[ngValue]=“dept.dept\u 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>

---

以下是一个供参考的示例。

你能更新你的html代码吗？您好，请检查我使用

innerHTML

属性更新dropdownlist HTMLTry检查以下答案：

<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);
}