如何在＆＃34;中选择＆＃34;在Angular 2？

时间：2015-11-13 19:20:03

标签： angular typescript

我正在使用Angular 2（TypeScript）。

我想为新的选择做点什么，但是我在onChange（）中得到的东西总是最后选择。我怎样才能获得新的选择？

System.out.println("Min. Grade = " + min + " ("+ name[minInd]+")");
  System.out.println("Max. Grade = " + max + " ("+name[maxInd]+")");

14 个答案:

答案 0 :(得分：581)

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

<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

答案 1 :(得分：34)

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

答案 2 :(得分：18)

只需使用[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>

答案 3 :(得分：11)

我在https://angular.io/docs/ts/latest/guide/forms.html

执行Angular 2表单教程（TypeScript版本）时遇到了这个问题

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

做Mark Markcok建议的工作，虽然我想知道原始教程中是否有我遗漏的内容，或者是否有更新。无论如何，添加

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

到HeroFormComponent类的 form.component.ts

和

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

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

答案 4 :(得分：3)

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

[[ -n "$var4" ]]   # $var4 is not empty

成分：

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

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

答案 5 :(得分：2)

最新离子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);

}

答案 6 :(得分：2)

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

我将此用于角度材料下拉列表。工作正常

答案 7 :(得分：2)

使用选择更改角度6及以上。例  (selectionChange)= onChange($event.value)

答案 8 :(得分：2)

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

答案 9 :(得分：2)

我遇到了同样的问题，并使用以下代码解决了问题：

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

答案 10 :(得分：1)

我尝试了所有建议，但对我没有任何帮助。

想象一下这种情况：您需要进行2向绑定，并且您需要使用NUMBER个值进行查找，并且希望使用该查找中的值来填充SELECT并突出显示所选的选项。

不能使用[value]或（ngModelChange），因为用户启动更改后您将无法选择所选的选项：[value]将所有内容视为 string ，关于（ngModelChange）-显然，当用户启动更改时不应使用它，因此会破坏正确的选择。使用[ngModel]可以将接收到的 VALUE 的格式固定为 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();
      });
  }

答案 11 :(得分：0)

在 Angular 5 中，我按以下方式进行操作。获取对象 $ event.value 而不是 $ event.target.value 

<mat-form-field color="warn">
   <mat-select (ngModelChange)="onChangeTown($event)" 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;
  console.log('selectedTown: ', selectedTown);
}

答案 12 :(得分：0)

角度7/8

从角度6开始，已弃用ngModel输入属性和反应形式指令，在角度7+中将其完全删除。 Read official doc here.

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

      //in your template
 <select formControlName="person" (change)="onChange($event)"class="form-control">
    <option [ngValue]="null" disabled>Choose person</option>
      <option *ngFor="let person of persons" [ngValue]="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);
  }

答案 13 :(得分：0)

从角度7起，由于不建议使用ngModel，我们可以简单地使用该控件以反应方式轻松获得新的选定值。

示例： 

<form [formGroup]="frmMyForm">
  <select class="form-control" formControlName="fieldCtrl">
    <option value=""></option>
    <option value="val1">label val 1</option>
    <option value="val2">label val 2</option>
    <option value="val3">label val 3</option>
  </select>
</form>

this.frmMyForm.get('fieldCtrl').valueChanges.subscribe( value => {
  this.selectedValue = value;
});

通过使用这种完全被动的方式，我们可以更轻松地将较旧的角度应用程序版本升级到较新的版本。

相关问题
最新问题