반응형
선택 옵션을 부울 값으로 변환
저는 angular2를 배우고 있습니다.다음과 같은 문제가 있습니다.
나는 있습니다select부울 값으로 작동해야 하는 필드:
<select [(ngModel)]="caseSensitive">
<option>false</option>
<option>true</option>
</select>
아니요. 필터에서 사용하면 부울이 아닌 문자열로 전송됩니다.변환기 등을 사용하여 변환할 수 있습니까?
나의 완전한 HTML 코드:
<input [(ngModel)]="nameFilter"/>
<select [(ngModel)]="caseSensitive">
<option>false</option>
<option>true</option>
</select>
<table>
<tr *ngFor="let p of (persons | MyFilter: nameFilter:caseSensitive); let i = index">
<td>{{i + 1 }} </td>
<td>{{
p.givenName+" "+ p.familyName
}}</td>
<td><img src="/img/flags/{{ p.nationality}}.png"></td>
</tr>
</table>
ts 코드:
import { Component } from '@angular/core';
import {MyFilter} from './MyFilter';
@Component({
selector: 'pizza-root',
pipes: [MyFilter],
templateUrl: 'app.component.html'
})
export class AppComponent {
public year = new Date().getFullYear();
public persons =[{"givenName":"Paul", "familyName": "Smith", "nationality":"american"},
{"givenName":"Jens", "familyName":"myName1", "nationality":"german"},
{"givenName":"Ernst", "familyName":"myName1", "nationality":"german"},
{"givenName":"Jenny", "familyName":"myName1", "nationality":"german"}];
constructor (){
console.log(this.persons);
}
}
파이프:
import { Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'MyFilter'
})
export class MyFilter implements PipeTransform{
transform( items: any[], args: string, caseSensitive : boolean ):any {
if (items != null && args != undefined && args != ''){
if (caseSensitive){
console.log("caseSensitive")
return items.filter(item=>item.givenName.indexOf(args)!== -1);
} else {
console.log("caseInSensitive")
return items.filter(item=> item.givenName.toLowerCase().indexOf(args.toLowerCase())!== -1);
}
}
console.log("else")
return items;
}
}
문제는 파이프가 제대로 작동하지 않는다는 것입니다.caseSensitive는 부울 값이 아닌 문자열로서의 바인딩입니다.
의 값<option>문자열이거나 다른 유형이 제공된 경우 문자열화됩니다.사용하는 경우ngValue대신, 당신은 다른 유형을 사용할 수 있고,ngModel형식을 유지합니다.
<select [(ngModel)]="caseSensitive">
<option [ngValue]="false">false</option>
<option [ngValue]="true">true</option>
</select>
언급URL : https://stackoverflow.com/questions/39910835/convert-a-select-option-to-boolean-value
반응형
'code' 카테고리의 다른 글
| 여러 클래스 제거(jQuery) (0) | 2023.06.17 |
|---|---|
| SignalR 허브에 연결된 수신기, 클라이언트 수 가져오기 (0) | 2023.06.17 |
| ggplot에서 일부 범례 끄기 (0) | 2023.06.17 |
| 이것이 메모리에서 2개의 c-string이 중복되는지 확인하는 정확하고 휴대 가능한 방법입니까? (0) | 2023.06.12 |
| 시스템에 로드된 ASP.NET 버전을 확인하는 방법은 무엇입니까? (0) | 2023.06.12 |