Итерация Enum в ngFor, angular5 - PullRequest
Новая
       9

Итерация Enum в ngFor, angular5

0 голосов
/ 30 мая 2018

Я пытаюсь перебрать перечисление в машинописи, чтобы создать соответствующие им переключатели.Я знаю, как сделать это с помощью массивов, но я пытаюсь сделать это с помощью перечислений.

    enum labelModes{
    'MultiClass',
    'MultiLabel'
}
@Component({
    selector: 'app-label-type',
    template: `

    <div class="text-center p-2">
    Type of labeling:<br> 
       <div *ngFor = "let labelMode of labelModes">
            <input
                type = "radio"
                name = "labelType"
                value = "{{labelMode}}"
                (change) = "radioChangeHandler($event)"> {{labelMode}}
    </div>
  `
})

Ничего не появляется

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Поставив решение моего вопроса, если кому-то нужно сделать что-то подобное.

Мой код для итерации перечисления.Я должен был установить значения для элементов, а затем получить к ним доступ, используя ключи и объекты.В идеале вы должны иметь возможность использовать object.keys (labelModes) вместо ключей (значений).Но это единственный способ, которым это сработало для меня.

возвращаются значения слева в перечислении.

export enum labelModes {
  multiclass = "multiclass",
  multilabel = "multilabel"
}
@Component({
  selector: "app-label-type",
  template: `

<div class="text-center p-2">
Type of labeling:<br> 
   <div *ngFor = "let labelMode of values">
        <input
            type = "radio"
            name = "labelType"
            value = "{{labelMode}}"
            (change) = "radioChangeHandler($event)"> {{labelMode}}
  </div>
`
})
export class LabelType {
  ngOnInit() {}
  selectedLabelType: string = " ";


  values = Object.keys(labelModes);
}
0 голосов
/ 30 мая 2018

У вас есть две ошибки:

  • Enum не повторяемый объект.Вам необходимо преобразовать его в массив (это зависит от того, используете ли вы строковые или числовые перечисления).
  • В шаблоне компонента вы используете локальную переменную.В шаблонах доступны только поля классов.

Ключевой вопрос - действительно ли вам нужен enum?Кажется, действительно хорошо подходит для массива: 

@Component({
    selector: 'app-label-type',
    template: `

    <div class="text-center p-2">
    Type of labeling:<br> 
       <div *ngFor = "let labelMode of labelModes">
            <input
                type = "radio"
                name = "labelType"
                value = "{{labelMode}}"
                (change) = "radioChangeHandler($event)"> {{labelMode}}
    </div>
  `
})
class Component {
     labelModes = ['MultiClass', 'MultiLabel']
}

На самом деле, перечисления легко интерпретируются неправильно (особенно разница между числовыми и строковыми перечислениями), я обычно предпочитаю заменять их на простые объекты или массивы, если я этого не делаюиспользуйте их.

...