Angular2의 열거형을 기준으로 선택합니다.
나는 다음과 같은 열거를 가지고 있습니다(나는 TypeScript를 사용하고 있습니다).
export enum CountryCodeEnum {
France = 1,
Belgium = 2
}
다음과 같이 각 옵션에 대해 열거 정수 값을 값으로 하고 열거 텍스트를 레이블로 하는 선택 항목을 내 양식으로 작성하고자 합니다.
<select>
<option value="1">France</option>
<option value="2">Belgium</option>
</select>
이거 어떻게 해요?
새 파이프를 생성하지 않으려면 한 가지 해결책을 더 제시합니다.헬퍼 속성에 키를 추출하여 사용할 수도 있습니다.
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<select>
<option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
</select>
</div>
`,
directives: []
})
export class App {
countries = CountryCodeEnum
constructor() {
this.keys = Object.keys(this.countries).filter(k => !isNaN(Number(k)));
}
}
데모: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview
편집:
문자열 대신 숫자 옵션이 필요한 경우:
- 교체하다
[value]
와 함께[ngValue]
- 더하다
.map(Number)
끝나고.filter(...)
update2 배열을 생성하여 단순화
@Pipe({name: 'enumToArray'})
export class EnumToArrayPipe implements PipeTransform {
transform(value) : Object {
return Object.keys(value).filter(e => !isNaN(+e)).map(o => { return {index: +o, name: value[o]}});
}
}
@Component({
...
imports: [EnumsToArrayPipe],
template: `<div *ngFor="let item of roles | enumToArray">{{item.index}}: {{item.name}}</div>`
})
class MyComponent {
roles = Role;
}
갱신하다
대신에pipes: [KeysPipe]
사용하다
@NgModule({
declarations: [KeysPipe],
exports: [KeysPipe],
}
export class SharedModule{}
@NgModule({
...
imports: [SharedModule],
})
원래의
사용.keys
https://stackoverflow.com/a/35536052/217408 에서 전화를 걸다
파이프를 약간 수정하여 열거형 항목의 이름을 가져오는 방법을 참조하십시오.
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (var enumMember in value) {
if (!isNaN(parseInt(enumMember, 10))) {
keys.push({key: enumMember, value: value[enumMember]});
// Uncomment if you want log
// console.log("enum member: ", value[enumMember]);
}
}
return keys;
}
}
@Component({ ...
pipes: [KeysPipe],
template: `
<select>
<option *ngFor="let item of countries | keys" [value]="item.key">{{item.value}}</option>
</select>
`
})
class MyComponent {
countries = CountryCodeEnum;
}
참고 항목 *ngFor?를 사용하여 개체 키를 반복하는 방법
Angular2 v2.0.0의 매우 간단한 방법은 다음과 같습니다.완성도를 위해 기본값을 설정하는 예를 포함했습니다.country
반응식으로 선택합니다.
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<select id="country" formControlName="country">
<option *ngFor="let key of keys" [value]="key">{{countries[key]}}</option>
</select>
</div>
`,
directives: []
})
export class App {
keys: any[];
countries = CountryCodeEnum;
constructor(private fb: FormBuilder) {
this.keys = Object.keys(this.countries).filter(Number);
this.country = CountryCodeEnum.Belgium; //Default the value
}
}
저는 Angular App에서 간단한 유틸리티 기능을 공유하여 변환하는 것을 선호했습니다.enum
빌드할 표준 배열로 다음을 선택합니다.
export function enumSelector(definition) {
return Object.keys(definition)
.map(key => ({ value: definition[key], title: key }));
}
성분의 변수를 다음과 같이 채우려면:
public countries = enumSelector(CountryCodeEnum);
그런 다음 이전 배열 기반의 Material Select를 채웁니다.
<md-select placeholder="Country" [(ngModel)]="country" name="country">
<md-option *ngFor="let c of countries" [value]="c.value">
{{ c.title }}
</md-option>
</md-select>
이 실 감사합니다!
"0"을 생략하지 않는 또 다른 유사한 솔루션("Unset"과 같이).필터(번호) IMHO를 사용하는 것은 좋은 접근법이 아닙니다.
@Component({
selector: 'my-app',
providers: [],
template: `
<select>
<option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
</select>`,
directives: []
})
export class App {
countries = CountryCodeEnum;
constructor() {
this.keys = Object.keys(this.countries).filter(f => !isNaN(Number(f)));
}
}
// ** NOTE: This enum contains 0 index **
export enum CountryCodeEnum {
Unset = 0,
US = 1,
EU = 2
}
이 답변에서 또 다른 스핀오프가 발생하지만, 이것은 실제로 값을 버그인 문자열로 변환하는 대신 숫자로 매핑합니다.또한 0개의 기본 열거형과 함께 작동합니다.
@Component({
selector: 'my-app',
providers: [],
template: `
<select>
<option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
</select>`,
directives: []
})
export class App {
countries = CountryCodeEnum;
constructor() {
this.keys = Object.keys(this.countries)
.filter(f => !isNaN(Number(f)))
.map(k => parseInt(k));;
}
}
Angular 6.1 이상부터 빌트인을 사용할 수 있습니다.KeyValuePipe
아래와 같이(angular.io 문서에서 붙여넣음).
물론 열거형에는 인간 친화적으로 읽을 수 있는 문자열이 포함되어 있다고 가정합니다 :)
@Component({
selector: 'keyvalue-pipe',
template: `<span>
<p>Object</p>
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
<p>Map</p>
<div *ngFor="let item of map | keyvalue">
{{item.key}}:{{item.value}}
</div>
</span>`
})
export class KeyValuePipeComponent {
object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
map = new Map([[2, 'foo'], [1, 'bar']]);
}
문자열로 이것을 시도해 볼 수 있습니다.
내 문자열 열거는 다음과 같은 정의를 가집니다.
enum StatusEnum {
Published = <any> 'published',
Draft = <any> 'draft'
}
는 다음과 같은 방법으로 js로 번역합니다.
{
Published: "published",
published: "Published",
Draft: "draft",
draft: "Draft"
}
제 프로젝트에는 이 중 몇 가지가 있어서 공유 서비스 lib에 작은 도우미 기능을 만들었습니다.
@Injectable()
export class UtilsService {
stringEnumToKeyValue(stringEnum) {
const keyValue = [];
const keys = Object.keys(stringEnum).filter((value, index) => {
return !(index % 2);
});
for (const k of keys) {
keyValue.push({key: k, value: stringEnum[k]});
}
return keyValue;
}
}
구성 요소 생성기에서 init를 수행하고 다음과 같이 템플릿에 바인딩합니다.
구성 요소:
statusSelect;
constructor(private utils: UtilsService) {
this.statusSelect = this.utils.stringEnumToKeyValue(StatusEnum);
}
템플릿에서:
<option *ngFor="let status of statusSelect" [value]="status.value">
{{status.key}}
</option>
app.module.ts의 공급자 배열에 UtilsService를 추가하여 다양한 구성 요소에 쉽게 주입할 수 있도록 해야 합니다.
제가 활자 초보자라서 틀린 부분이나 더 좋은 해결책이 있으면 수정해주세요.
파이프나 별도의 코드 없이 적용할 수 있는 최적의 옵션입니다.
import { Component } from '@angular/core';
enum AgentStatus {
available =1 ,
busy = 2,
away = 3,
offline = 0
}
@Component({
selector: 'my-app',
template: `
<h1>Choose Value</h1>
<select (change)="parseValue($event.target.value)">
<option>--select--</option>
<option *ngFor="let name of options"
[value]="name">{{name}}</option>
</select>
<h1 [hidden]="myValue == null">
You entered {{AgentStatus[myValue]}}
</h1>`
})
export class AppComponent {
options : string[];
myValue: AgentStatus;
AgentStatus : typeof AgentStatus = AgentStatus;
ngOnInit() {
var x = AgentStatus;
var options = Object.keys(AgentStatus);
this.options = options.slice(options.length / 2);
}
parseValue(value : string) {
this.myValue = AgentStatus[value];
}
}
export enum Unit
{
Kg = 1,
Pack,
Piece,
Litre
}
//지도 있음
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {
transform(enumObj: Object) {
const keys = Object.keys(enumObj).filter(key => parseInt(key));
let map = new Map<string, string>();
keys.forEach(key => map.set(key, enumObj[key]))
console.log( Array.from(map));
return Array.from(map);
}
}
//세트포함
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {
transform(enumObj: Object) {
const keys = Object.keys(enumObj).filter(key => parseInt(key));
let set = new Set();
keys.forEach(key => set.add({ key: parseInt(key), value: enumObj[key] }))
return Array.from(set);
}
}
Angular 6.1.10 / Typecript를 사용한 또 다른 솔루션...
enum Test {
No,
Pipe,
Needed,
Just,
Use,
Filter
}
console.log('Labels: ');
let i = 0;
const selectOptions = [
];
Object.keys(Test).filter(key => !Number(key) && key !== '0').forEach(key => {
selectOptions.push({position: i, text: key});
i++;
});
console.log(selectOptions);
인쇄됩니다.
Console:
Labels:
(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {position: 0, text: "No"}
1: {position: 1, text: "Pipe"}
2: {position: 2, text: "Needed"}
3: {position: 3, text: "Just"}
4: {position: 4, text: "Use"}
5: {position: 5, text: "Filter"}
언급URL : https://stackoverflow.com/questions/35750059/select-based-on-enum-in-angular2
'programing' 카테고리의 다른 글
LayoutInflater attachToRoot 매개변수는 무엇을 의미합니까? (0) | 2023.09.09 |
---|---|
간단한 자바스크립트 카운트다운 타이머를 위한 코드? (0) | 2023.09.09 |
Why is table-level locking better than row-level locking for large tables? (0) | 2023.09.09 |
JQuery Ajax 게시 매개 변수가 IE에서 전송되지 않는 경우가 있습니다. (0) | 2023.09.09 |
양식을 동적으로 작성하여 제출 (0) | 2023.09.09 |