如何在Angular 2的“选择”中获得新选择？

角7/8

从角度6开始，已弃用ngModel输入属性和反应形式指令，在角度7+中将其完全删除。在此处阅读官方文档。

使用反应形式方法，您可以将所选数据获取/设置为；

      //in your template
 <select formControlName="person" (change)="onChange($event)"class="form-control">
    <option [value]="null" disabled>Choose person</option>
      <option *ngFor="let person of persons" [value]="person"> 
        {{person.name}}
    </option>
 </select> 


 //in your ts
 onChange($event) {
    let person = this.peopleForm.get("person").value
    console.log("selected person--->", person);
    // this.peopleForm.get("person").setValue(person.id);
  }

在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>

在角度6及更高角度中使用selectionChange。例 (selectionChange)= onChange($event.value)

最新的ionic 3.2.0已将（change）修改为（ionChange）

例如：HTML

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

TS

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

}

只需使用[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版本）时遇到了这个问题

select / option块不允许通过选择选项之一来更改选择的值。

尽管我想知道原始教程中是否缺少某些内容，或者是否有更新，但是按照Mark Rajcok的建议进行工作还是可行的。无论如何，添加

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

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

和

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

<select>元素中的hero-form.component.html 使其起作用

<mat-form-field>
<mat-select placeholder="Vacancies" [(ngModel)]="vacanciesSpinnerSelectedItem.code" (ngModelChange)="spinnerClick1($event)"
    [ngModelOptions]="{standalone: true}" required>
    <mat-option *ngFor="let spinnerValue of vacanciesSpinnerValues" [value]="spinnerValue?.code">{{spinnerValue.description}}</mat-option>
</mat-select>

我将此用于角度材质下拉列表。工作良好

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

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

这是我可以通过两种方式绑定来设置页面加载时的选择值的唯一方法。这是因为填充选择框的列表与选择框所绑定的对象并不完全相同，并且它必须是相同的对象，而不仅仅是相同的属性值。

您可以通过在select标记上创建一个引用变量#device并将其传递到变更处理程序onChange($event, device.value)中，该值应返回新的值，该变量应具有新值

<select [(ng-model)]="selectedDevice" #device (change)="onChange($event, device.value)">
    <option *ng-for="#i of devices">{{i}}</option>
</select>

onChange($event, deviceValue) {
    console.log(deviceValue);
}