主页 / 问题 / 918995
Accepted
Artemy Khodorev
Asked:2020-12-12 19:49:53 +0000 UTC2020-12-12 19:49:53 +0000 UTC

Angular 4. <select> 项目仅第二次被选中

  • 772

有<select>, 有 一个<option>, 面向null, 其余<option>由*ngForfrom 数组组成。问题是这样的：如果初始值为null，那么第一次选择任何其他选项时<select>，不会先选择任何项目。如果您再次展开选项列表并选择一个，那么它只会被选中。即：1）初始值null，在<select>显示的“未选择”中-> 2）选择任何项目-<select>通常为空-> 3）再次选择任何项目-在<select>所选项目中。这是为什么？如何解决？我试图分配[select]="option.id === object.option.id"- 零效应，我试图[value]用[ngValue]- 零效应替换它。我试着写[(ngModal)]="object.option.id ? object.option.id : object.option"- 我得到一个错误，因为 起初object.option: null. 下拉列表布局的完整代码：

<select [(ngModel)]="object.option ? object.option.id : object.option">
  <option [value]="null">Не выбрано</option>
  <option *ngFor="let item of options" [value]="item.id">{{item.name}}</option>
</select>

orbject.option- 只能有一种选择。如果存在该选项，则它是一个具有 id 属性的对象object.option.id。

{
 object: {
  option: {
   id: 11111
  }
 }
}

如果该选项不存在，那么它是null.

{
 object: {
  option: null
 }
}

数组options是所有可能选项的目录。我举了一个例子：https ://stackblitz.com/edit/angular-jk1n2d?file=src%2Fapp%2Foptions%2Foptions.component.html 我 怀疑这件事是在签到[(ngModel)]，我需要使用object.option.id，但如果我直接指定而不检查它，然后以防object.option: null发生错误并且应用程序崩溃。

typescript

1 个回答

  1. Best Answer

    您永远不需要将条件传递给指令ngModel:) 您只需要一个额外的变量来存储所选选项。让它成为selectedOption：

    options = [
  { id: '111', name: 'Option 1' },
  { id: '222', name: 'Option 2' },
  { id: '333', name: 'Option 3' },
];

public selectedOption = null;

    最初null是因为没有选择任何选项。ngModel我们通过双向绑定将此属性传递给指令：

    <select [(ngModel)]="selectedOption">
  <option [value]="null">Не выбрано</option>
  <option *ngFor="let item of options" [value]="item.id">{{item.name}}</option>
</select>

<p>{{ selectedOption }}</p>

    为了清楚起见，我添加了一段，因此您可以确保属性更改并采用您在属性绑定中指定的值value:)

    如果您需要手动跟踪模型更改，那么我们使用单向绑定并订阅事件生成器ngModelChange：

    <select [ngModel]="selectedOption" (ngModelChange)="selectedOptionChanged($event)">
    ...
</select>

    让我们在组件中创建这个方法：

    public selectedOptionChanged(id: number): void {
    console.log(id);
}

    但是注意在单向绑定的情况下，属性本身的值是selectedOption不会改变的，所以要靠id.

    • 0

相关问题