Как выбрать значение в раскрывающемся списке на основе значения свойства объекта - выберите и угловой - PullRequest
Новая
       39

Как выбрать значение в раскрывающемся списке на основе значения свойства объекта - выберите и угловой

0 голосов
/ 13 июня 2018

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

Вот мой HTML 

<div class="form-group">
  <label class="control-label dash-control-label col-xs-3">Products category:</label>
  <div class="col-xs-9">
    <select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
            data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
      <option [value]="helperService.IsItEmptyGuid()"  [selected]="isDefaultSelected()">-/-</option>
      <option [value]="group.id" *ngFor="let group of mainGroups" [selected]="group.id==='a0e25215-a60e-4444-b6ac-4521b7de4b37'">{{group.title}}</option>
    </select>
{{article.mainGroup.id}}
  </div>
</div>

Когда я запускаю свое приложениеи откройте эту форму, как вы можете видеть, я поставил {{article.mainGroup.id}} <- это статья в переплете, чтобы проверить, есть ли идентификатор категории, и когда я открываю форму, она выглядит так: </p>

enter image description here

Так что, очевидно, {{article.mainGroup.id}} содержит значение, но я не могу заставить <select> отображать это значение как выбранное ...

Любая помощь будет потрясающей, большое спасибо!

РЕДАКТИРОВАТЬ: он ничего не делает, просто выбрав - / - если продукт не имеет группы, потому что тогда article.mainGroup.id будет пустым guid.Например, вот что я сделал:

1.) Выберите статью 2.) Откройте модал 3.) Изображение при открытии модала:

enter image description here

Как видите, значение есть, но в модале ничего не выбрано.Вот оригинальный код, а не только img: 

<div class="form-group">
    <label class="control-label dash-control-label col-xs-3">Group:</label>
      <div class="col-xs-9">
        <select touch-enter-directive [ref]="ref" [nextFocusElement]="articleSubGroup" id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
                data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.mainGroup.id">
          <option [ngValue]="null">-/-</option>
          <option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
        </select>
      {{article.mainGroup.id}}
     </div>
</div>

Возможно, select2 создает проблему?

Спасибо

1 Ответ

0 голосов
/ 13 июня 2018

сделать так 

   <select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
            data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
      <option [ngValue]="null" >-/-</option>
      <option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
    </select>

В угловом [select] не требуется, он выберет опцию на основе значения идентификатора, который вы передаете как [(ngModel)] to select element, также не нужно emptyguid, если ваше значение null, тогда будет выбрана опция по умолчанию

...