Как правильно связать перечисление в выпадающем меню в Angular 4? - PullRequest
Новая
       13

Как правильно связать перечисление в выпадающем меню в Angular 4?

0 голосов
/ 20 ноября 2018

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

export enum CategoryEnum {
      EXAMPLECAT1 = 1,
      EXAMPLECAT2 = 2,
      EXAMPLECAT3 = 3,
      EXAMPLECAT4 = 4
    }

@Component({
  selector: 'category',
  template: `
    <label for="appCategory">Example Category: </label>
    <select class="form-control" id="exampleCategory" required 
            (change)="parseValue($event.target.value)"
            (ngModelChange)="changeSelectedType($event)">
      <option *ngFor="let category of categoryTypes"
              [value]="category">{{category.type}}</option>
    </select>
  `
})

export class CategoryComponent {

  private selectedCategoryType: CategoryEnum
  private categoryTypes;

  constructor(){
    this.categoryTypes = CategoryMapping
  }

  parseValue(value : string) {
    this.selectedCategoryType = AppCategoryEnum[value];
  }

  //Logging: Change Selected Product type callback
  private changeSelectedType(event: any) {
    console.log(event); //object, depends on ngValue
    console.log(this.selectedCategoryType); //object, depends on ngValue
  }
}

Отображение типа данных enum на метки: 

export const CategoryMapping = [
  { value: ExampleCategoryEnum.EXAMPLECAT1, type: 'Example 1' },
  { value: ExampleCategoryEnum.EXAMPLECAT2, type: 'Example 2'},
  { value: ExampleCategoryEnum.EXAMPLECAT3, type: 'Example 3'},
  { value: ExampleCategoryEnum.EXAMPLECAT4, type: 'Example 4'}
];

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Мы можем упростить связывание с ngModel, у меня есть еще одно свойство для связывания с элементом select и получения свойства для получения значения vaLue как CategoryEnum

compoenent 

  // I have change this to public just for demo
  public get selectedCategoryType():CategoryEnum {
    return this.selectedValue ? this.selectedValue.value: null; 
  }
  private categoryTypes;

  public selectedValue:any;

  constructor() {
    this.categoryTypes = CategoryMapping;
    this.selectedValue = this.categoryTypes[2]; // set default value 
  }

template 

<select class="form-control" id="exampleCategory" required  [(ngModel)]="selectedValue" >
      <option></option>
      <option *ngFor="let category of categoryTypes"
              [ngValue]="category">{{category.type}}</option>
    </select>
<br>

selectedCategoryType :  {{selectedCategoryType | json}}

Вы должны использовать [ngValue] для опций, когда вы хотите отправлять не примитивные типы (в вашем случае, объекты)как сказал @trichetriche

демо

0 голосов
/ 20 ноября 2018

Да, установите 

<select ... [value]="1">

, где 1 - примерное значение перечисления категории по умолчанию.

И используйте category.value вместо всего объекта category в качестве значения опции 

<option ... [value]="category.value" >

и обновите ваш файл .ts для обработки этого изменения.

...