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

9 回答

• 32

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

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

  回复于 2024-04-28T06:26:09+08:00
• 3

  如果您不需要双向数据绑定：

  <select (change)="onChange($event.target.value)">
      <option *ngFor="let i of devices">{{i}}</option>
  </select>
  
  onChange(deviceValue) {
      console.log(deviceValue);
  }
  

  对于双向数据绑定，请分隔事件和属性绑定：

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

  export class AppComponent {
    devices = 'one two three'.split(' ');
    selectedDevice = 'two';
    onChange(newValue) {
      console.log(newValue);
      this.selectedDevice = newValue;
      // ... do other stuff here ...
  }
  

  ---

  如果 devices 是对象数组，则绑定到 ngValue 而不是 value ：

  <select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">
    <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
  </select>
  {{selectedDeviceObj | json}}
  

  export class AppComponent {
    deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
    selectedDeviceObj = this.deviceObjects[1];
    onChangeObj(newObj) {
      console.log(newObj);
      this.selectedDeviceObj = newObj;
      // ... do other stuff here ...
    }
  }
  

  ---

  Plunker - 不使用 <form>
  Plunker - 使用 <form> 并使用新的表单API

  回复于 2024-04-28T06:26:09+08:00
• 493

  最新离子3.2.0已修改（更改）为（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);
  
  }
  

  回复于 2024-04-28T06:26:09+08:00
• 0

  您可以通过在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);
  }
  

  回复于 2024-04-28T06:26:09+08:00
• 2

  在https://angular.io/docs/ts/latest/guide/forms.html执行Angular 2表单教程（TypeScript版本）时遇到了这个问题

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

  做Mark Markkok建议的工作，虽然我想知道在原始教程中是否遗漏了某些内容，或者是否有更新 . 在任何情况下，添加

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

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

  和

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

  到 <select> 元素中的hero-form.component.html使它工作

  回复于 2024-04-28T06:26:09+08:00
• 10

  使用angularChange在角度6及以上 . 示例 (selectionChange)= onChange($event.value)

  回复于 2024-04-28T06:26:09+08:00
• 1

  Just use [ngValue] instead of [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>
  

  回复于 2024-04-28T06:26:09+08:00
• 18

  另一种选择是将对象作为字符串存储在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);
  }
  

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

  回复于 2024-04-28T06:26:09+08:00
• 2

  在 Angular 5 我用以下方式做了 . 获取对象 $event.value 而不是 $event.target.value

  <mat-form-field color="warn">
     <mat-select class="form-width" formControlName="branch" [(ngModel)]="branch" placeholder="Enter branch">
       <mat-option *ngFor="let branch of branchs" [value]="branch.value">
                    {{ branch.name }}
       </mat-option>
     </mat-select>
  </mat-form-field>
  
  onChangeTown(event): void {
    const selectedTown = event.value;
    console.log('selectedTown: ', selectedTown);
  }
  

  回复于 2024-04-28T06:26:09+08:00