如何根據對象屬性值在下拉列表中選擇值-選擇和角度

Question

我有一個具有類別的產品，並且在編輯產品時，我想在課程下拉列表中顯示當前類別。 如果用戶想在下拉菜單中更改類別，可以，但是在加載時，我想顯示所選當前產品的值。

這是我的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}}放在<-它是綁定文章以檢查是否存在類別ID，而當我打開表單時，它看起來像這樣：

因此， {{article.mainGroup.id}}擁有一個值，但是我不能強迫<select>將其顯示為選定的值...

任何幫助都會很棒，非常感謝！

編輯：它什么也沒做，只是選擇-/-如果產品沒有組，因為article.mainGroup.id將是空的GUID。

 isDefaultSelected() {
    return this._globalHelperService.isEmptyGuid(this.article.mainGroup.id);
  }

編輯2：以Pranay Rana為例，這是我所做的：

1.）選擇文章2.）打開模態3.）打開模態時的圖像：

如您所見，值在那里，但是模式中什么也沒有選擇。 這是原始代碼，不僅是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引起了問題？

謝謝

Answer 1

像這樣

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

在不需要angular [select]的情況下，它將基於您作為[(ngModel)] to select element傳遞的id值來選擇選項[(ngModel)] to select element ，如果您的值為null則不需要emptyguid ，那么默認選項將被選中