각도 캐스트 선택 값을 int로

각도 캐스트 선택 값을 int로

다음과 같은 다양한 선택 항목이 있는 양식이 있습니다.

<select [(ngModel)]="selected.isConnected" (ngModelChange)="formChanged()" name="etat" id="etat" class="form-control">
    <option value="0">Not connected</option>
    <option value="1">Connected</option>
</select> 

백엔드에서 "isConnected" 특성의 int를 수신해야 합니다.안타깝게도 선택 값을 변경하는 즉시 속성이 문자열에 캐스팅됩니다.

{
    isConnected : "0", // 0 expected
}

표준용<input>나는 사용할 수 있습니다.type="number"당분간은<select>저는 아무것도 모릅니다.

각도 2를 강제로 데이터를 int에 캐스팅하는 방법이 있습니까?

"value" 대신 [ngValue] 사용:

<select [(ngModel)]="selected.isConnected" id="etat">
    <option [ngValue]="0">Not connected</option>
    <option [ngValue]="1">Connected</option>
</select> 

폼Changed() method(아직 제공하지 않은 방식) 내에서 캐스팅을 원할 경우.아래와 같이 + 기호를 사용해야 합니다.

formChanged(): void {
    selected.isConnected = +selected.isConnected;
    ...
}

아니요, 슬프게도 당신은 그것을 당신 스스로 해석해야 합니다.formChanged()메소드, 당신은 항상으로부터 문자열을 받기 때문에.select.

다음과 같은 방법으로 시도할 수 있습니다.

formChanged(): void {
    selected.isConnected = parseInt(selected.isConnected);
    // ...
}

숫자 변수를 보내 선택한 후 해당 선택 요소의 값을 할당할 수 있습니다.그런 다음 변경 시 값을 캡처하려면 아래와 같이 이벤트를 추가(변경)하여 값을 선택하고 검색할 수 있습니다.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<select value="{{isConnected}}" (change)="printConnected($event.target.value)" name="etat" id="etat" class="form-control">
          <option value="0">Not connected</option>
          <option value="1">Connected</option>
        </select>
        <div *ngIf="changed">You've selected {{isConnected}}<div>`
})
export class AppComponent {

  isConnected : number = 1;
  changed : boolean = false;
  printConnected(value){
this.isConnected = value;
this.changed=true;
  }

}

http://plnkr.co/edit/xO2mrTdpTGufkgXqdhYD?p=preview 에서 예제를 볼 수 있습니다.

반응형 바인딩을 사용 중이므로 사용하지 않습니다.[(ngModel)]대신에 나는 다음을 사용하는 파이프 관찰 가능한 것을 만들었습니다.JSON.parse(value)(왜냐하면+value처리할 수 없음"null"):

*.component.vmdk:

    <div class="col-lg-4 form-group">
      <label>Group Type</label>
      <select class="form-control" (change)="groupType$.next($event.target.value)">
        <option [value]="null"></option>
        <option *ngFor="let groupType of filterData.groupTypes" [value]="groupType.id">{{groupType.label}}</option>
      </select>
    </div>
    <div class="col-lg-4 form-group" *ngIf="filteredGroups$ | async as groupOptions">
      <label>Group</label>
      <select class="form-control" (change)="group$.next($event.target.value)">
        <option [value]="null"></option>
        <option *ngFor="let group of groupOptions" [value]="group.id">{{group.label}}</option>
      </select>
    </div>
    <div class="col-lg-4 form-group">
      <label>Status</label>
      <select class="form-control" (change)="status$.next($event.target.value)">
        <option [value]="null"></option>
        <option *ngFor="let status of filterData.statuses" [value]="status.id">{{status.label}}</option>
      </select>
    </div>

*.component.ts:

  group$ = new BehaviorSubject<string>(null);
  groupId$ = this.group$.pipe(
    map((groupId: string) => JSON.parse(groupId) as number)
  );
  groupType$ = new BehaviorSubject<string>(null);
  groupTypeId$ = this.groupType$.pipe(
    map((typeId: string) => JSON.parse(typeId) as number)
  );
  status$ = new BehaviorSubject<string>(null);
  statusId$ = this.status$.pipe(
    map((statusId: string) => JSON.parse(statusId) as number)
  );

[ngValue]는 개체를 대상으로 합니다.숫자 상수에 대해서도 인위적인 옵션 값을 생성합니다.테스트 또는 가독성에 대해 우려할 수 있는 사람들을 위해 양방향 바인딩 마이크로 구문을 확장할 수 있습니다.

    <select [ngModel]="selected.isConnected" 
            (ngModelChange)="selected.isConnected=$event && +$event" id="etat">
        <option value="0">Not connected</option>
        <option value="1">Connected</option>
    </select> 

언급URL : https://stackoverflow.com/questions/39474188/angular-cast-select-value-to-int