code

선택 옵션을 부울 값으로 변환

starcafe 2023. 6. 17. 09:31
반응형

선택 옵션을 부울 값으로 변환

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

반응형