Question

我有一个下拉列表，其中包含类别列表

<div class="col-md-10 col-sm-10 col-xs-10 nopadding">
    <select class="form-control" [(ngModel)]="pc.profile_characteristic_category_id" name="profile_characteristic_category_id"> 
      <option value="">--Select--</option>
      <option *ngFor="let category of categories" [value]="category.profile_characteristic_category_id">{{ category.name }}</option>
    </select>
</div>

下拉列表旁边是操作按钮。

<div class="btn-group pull-right col-md-2 col-sm-2 col-xs-2 nopadding">
    <button type="button" class="glyphicon glyphicon-wrench action-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     </button>
     <ul class="dropdown-menu">
        <li><a data-toggle="modal" href="#addCategoryModalBox" (click)="displayNewCategoryForm()">Add</a></li>
        <li><a data-toggle="modal" href="#addCategoryModalBox" (click)="editProfileCharacteristicCategory()">Edit</a></li>
        <li><a href="#">Delete</a></li>  
    </ul>

假设下拉列表具有类别3并且单击了编辑按钮，单击编辑按钮时，我需要获取所选的类别对象。

{id：3，＆＃39; name：Category 3＆＃39;，pid：272，profile_characteristic_category_id：1001}

关于如何实现这一点的任何想法？

Answer 1

嗯，当然，首先要实现一个getter

get selectedOption() {
  return this.categories
    .find(c => c.profile_characteristic_category_id === this.pc.profile_characteristic_category_id) || null;
}

这将返回所选选项，如果找不到选项，则返回null。

现在，您只需将其与编辑按钮

一起使用即可

<li><a data-toggle="modal" href="#addCategoryModalBox" (click)="editProfileCharacteristicCategory(selectedOption)">Edit</a></li>

Answer 2

@ trichetriche答案的替代方法是直接使用类别对象itsef作为选择框的模型，而不是profile_characteristic_category_id：

<select class="form-control" [(ngModel)]="pc.selectedCategory" name="category"> 
  <option value="">--Select--</option>
  <option *ngFor="let category of categories" [ngValue]="category">{{ category.name }}</option>
</select>

选定的类别对象本身现在将存储在pc.selectedCategory中，您只需使用

(click)="editProfileCharacteristicCategory(pc.selectedCategory)"

在编辑按钮上单击获取选定的下拉对象 - 角度4

2 个答案: