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

Posted 2023-05-07

【中文标题】如何根据对象属性值在下拉列表中选择值 - 选择和角度

【英文标题】：How to select value in dropdown based on objects property value - select and angular

【发布时间】：2018-11-22 09:42:32

【问题描述】：

我有一个产品，它有一个类别，在编辑产品时，我想在下拉列表中显示当前类别。如果用户想在下拉列表中更改类别是可以的，但在加载时我想显示选定的当前产品的价值。

这是我的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.) modal 打开时的图片：

如您所见，值是存在的，但在模态中没有选择任何内容。 这是原始代码，不仅是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 出了问题？

谢谢

【问题讨论】：

你能告诉我们isDefaultSelected()返回什么。

html 中的下拉菜单没有多选

你能在stackbiz分享代码吗

我假设 isDefaultSelected 在某些时候返回 true，所以这就是错误行为的原因。

提供的答案试试

【参考方案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>

在角度[select] 不需要它会根据你传递为[(ngModel)] to select element 的id 值选择选项，如果你的值是null 也不需要emptyguid 然后默认选项将被选中

【讨论】：

我会在一秒钟内尝试这个，但你能解释一下为什么我需要 ngValue 而不是 value？

@billy_56 - 检查这个：reddit.com/r/Angular2/comments/65run4/…

如果我使用 ngValue，我意识到我的下拉用户界面没有按预期工作，当我从下拉菜单中选择一个值时，它不会关闭它会保持打开状态

@billy_56 - 如果可能的话，在 stackbiz 提供代码，我会看看

好的，我会尝试在那里发布代码，我可以将对象绑定到 ngModel，而不是 article.groupId 来编写 article.mainGroup.Id（mainGroup 是具有自己 id 的 Group 类型的属性）