javascript - 如何根据对象属性值在下拉列表中选择值-选择和 Angular

我有一个具有类别的产品，并且在编辑产品时，我想在课程下拉列表中显示当前类别。如果用户想在下拉菜单中更改类别，可以，但是在加载时，我想显示所选当前产品的值。

这是我的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}}


因此，显然{{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引起了问题？

谢谢

最佳答案

像这样

   <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传递的id值来选择选项，如果您的值是emptyguid，也将不需要null，则将选择默认选项