我使用的是Angular 2 (TypeScript)。

我想对新的选择做一些事情,但我在onChange()中得到的总是最后一个选择。我如何获得新的选择?

<select [(ngModel)]="selectedDevice" (change)="onChange($event)">
   <option *ngFor="#i of devices">{{i}}</option>
</select>
onChange($event) {
    console.log(this.selectedDevice);
    // I want to do something here with the new selectedDevice, but what I
    // get here is always the last selection, not the one I just selected.
}

当前回答

我尝试了所有的建议,但没有一个对我有效。

想象一下这样的情况:您需要一个双向绑定,并且有一个带有NUMBER值的查找,您希望用这个查找的值填充SELECT并突出显示所选的选项。

使用[value]或(ngModelChange)是行不通的,因为在用户发起更改后,你将无法选择所选的选项:[value]将所有内容都视为字符串,至于(ngModelChange)——它显然不应该在用户发起更改时使用,因此它破坏了正确的选择。使用[ngModel]可以保证接收到的值的固定格式为INDEX: VALUE,并且很容易相应地解析它,然而,它再次破坏了所选的选项。

因此,我们使用[ngValue](它将负责正确的类型),(change)和…[value],这保证处理程序接收值,而不是一个显示的值或索引:value:)下面是我的工作笨拙的解决方案:

  <select
    class="browser-default custom-select"
    (change)="onEdit($event.target.value)"
  >
    <option [value]="">{{
      '::Licences:SelectLicence' | abpLocalization
    }}</option>
    <ng-container *ngIf="licencesLookupData$ | async">
      <option
        *ngFor="let l of licencesLookupData$ | async"
        [ngValue]="l.id"
        [value]="l.id"
        [selected]="l.id == selected.id"
      >
        {{ l.id }} &nbsp;&nbsp; {{ l.displayName | defaultValue }}
      </option>
    </ng-container>
  </select>

  onEdit(idString: string) {
    const id = Number(idString);
    if (isNaN(id)) {
      this.onAdd();
      return;
    }
    this.licencesLoading = true;
    this.licencesService
      .getById(id)
      .pipe(finalize(() => (this.licencesLoading = false)), takeUntil(this.destroy))
      .subscribe((state: Licences.LicenceWithFlatProperties) => {
        this.selected = state;
        this.buildForm();
        this.get();
      });
  }

其他回答

另一种选择是将对象的value存储为字符串:

<select [ngModel]="selectedDevice | json" (ngModelChange)="onChange($event)">
    <option [value]="i | json" *ngFor="let i of devices">{{i}}</option>
</select>

组件:

onChange(val) {
    this.selectedDevice = JSON.parse(val);
}

这是唯一的方法,我可以得到双向绑定工作,以设置页面加载的选择值。这是因为填充选择框的列表与我的选择绑定的对象不完全相同,它需要是相同的对象,而不仅仅是相同的属性值。

在Angular 8中,你可以像这样简单地使用"selectionChange":

 <mat-select  [(value)]="selectedData" (selectionChange)="onChange()" >
  <mat-option *ngFor="let i of data" [value]="i.ItemID">
  {{i.ItemName}}
  </mat-option>
 </mat-select>

使用[ngValue]代替[value]!!

export class Organisation {
  description: string;
  id: string;
  name: string;
}
export class ScheduleComponent implements OnInit {
  selectedOrg: Organisation;
  orgs: Organisation[] = [];

  constructor(private organisationService: OrganisationService) {}

  get selectedOrgMod() {
    return this.selectedOrg;
  }

  set selectedOrgMod(value) {
    this.selectedOrg = value;
  }
}


<div class="form-group">
      <label for="organisation">Organisation
      <select id="organisation" class="form-control" [(ngModel)]="selectedOrgMod" required>
        <option *ngFor="let org of orgs" [ngValue]="org">{{org.name}}</option>
      </select>
      </label>
</div>

我在https://angular.io/docs/ts/latest/guide/forms.html上学习Angular 2表单教程(TypeScript版本)时遇到了这个问题

选择/选项块不允许通过选择其中一个选项来改变选择的值。

按照Mark Rajcok的建议去做是有效的,尽管我想知道在最初的教程中我是否遗漏了什么内容,或者是否有更新。在任何情况下,补充

onChange(newVal) {
    this.model.power = newVal;
}

到HeroFormComponent类中的hero-form.component.ts

and

(change)="onChange($event.target.value)"

到her-form.com ponent.html中的<select>元素使其工作

最新的离子3.2.0修改为ionChange

例如: 超文本标记语言

<ion-select (ionChange)="function($event)"> <ion-option>1<ion-option>
</ion-select>

TS

function($event){
// this gives the selected element
 console.log($event);

}