Angular 将新项绑定到选定项后丢失选定项

我对Angular 2上的select元素有问题。 我在Angular2的两个不同版本上创建了两个示例，但行为相同：

• 版本2.0.0-rc.1：

• 版本2.0.2：

请遵循以下步骤：将所选内容从“2”更改为“1”->单击按钮“测试”->

• 版本2.0.0-rc.1->没问题
• 版本2.0.2->失败，失去选择

以下是公开此信息的代码：

@Component({
    selector: 'app',
    template: `
      <select class="form-control" [ngModel]="value">
    <option *ngFor="let item of items" [ngValue]="item.value">
        {{item.text}}
    </option>
</select>
<button type="button" (click)="test()">Test</button>
    `
})
export class App {

  items: any[];
    value: any;

  constructor() {
    this.items = [
            { text: '1', value: 1 },
            { text: '2', value: 2 }
        ];
        this.value = this.items[1].value;
  }

  test() {
    this.value = this.items[0].value;
        this.items = [
            { text: '1', value: 1 },
            { text: '2', value: 2 },
            { text: '3', value: 3 }
        ];

    }

}

@组件({
选择器：“应用程序”，
模板：`
{{item.text}
试验
`
})
导出类应用程序{
项目：任何[]；
价值：任何；
构造函数（）{
此项。项目=[
{文本：'1'，值：1}，
{文本：'2'，值：2}
];
this.value=this.items[1]。值；
}
测试（）{
this.value=this.items[0].value；
此项。项目=[
{文本：'1'，值：1}，
{文本：'2'，值：2}，
{文本：'3'，值：3}
];
}
}

---

我想知道2.0.2版有漏洞吗？如何解决这个问题。谢谢。

这是因为您创建了一个新阵列<代码>[ngValue]比较对象标识而不是数据内容。如果它得到一个不同的对象实例，它不认为它是相同的，并且不显示它作为选择。

更新

test（）

中的

value

以反映新的选择，或者不创建新数组，而只修改先前创建的数组

实际移动

this.value = this.items[0].value;

在

test（）函数的末尾，

将解决您的问题

---

当您单击按钮

Test

时，您的

[ngModel]

属性保持与以前的值相同。 移动的

到

test（）的末尾也没有帮助，因为

1 === 1

而
NgModel
指令中
ngochanges
内的方法
isPropertyUpdated
将返回false

因此，我认为您必须更改angular2规范中提到的声明




比如：

在组件中：

constructor() {
  this.items = [
    { text: '1', value: 1 },
    { text: '2', value: 2 }
  ];
  this.value = this.items[1];
}

test() {
  this.items = [
    { text: '1', value: 1 },
    { text: '2', value: 2 },
    { text: '3', value: 3 }
  ];
  this.value = this.items[0];
}

在js
{}！=={}

这将帮助您使用
select[ngModel]

请根据您的最佳判断，尝试包含一些您认为导致您出现问题的代码片段。StackOverflow不允许在没有代码块的情况下链接到plnkr是有原因的。@HarryNinh:我附加了一些代码。没有工作，请重新检查，您是否将这个.items=替换为这个.items.push=？怎么了？对不起，忘了保存上次的零钱。它现在应该可以工作了。也不工作，请按照我的步骤，选择也丢失了：（不知道“丢失”是什么意思。）
this.value=this.items[0].value；
将选择设置为第一个元素，这就是点击
[test]
时plunker所做的。“选择丢失”表示选择标记上显示的文本为空，
[ngValue]="item"

constructor() {
  this.items = [
    { text: '1', value: 1 },
    { text: '2', value: 2 }
  ];
  this.value = this.items[1];
}

test() {
  this.items = [
    { text: '1', value: 1 },
    { text: '2', value: 2 },
    { text: '3', value: 3 }
  ];
  this.value = this.items[0];
}