Angular 2 beta – 选择不起作用（Chrome 除外）

Posted 2023-03-13

【中文标题】Angular 2 beta – 选择不起作用（Chrome 除外）

【英文标题】：Angular 2 beta – Select not working (except in Chrome)

【发布时间】：2016-05-15 03:36:24

【问题描述】：

我只是有一个关于选择元素的简单问题。我花了很多时间调试我的代码，因为 select 元素没有接受更改。但后来我发现了一些有趣的事情。他们在他们的页面 angualr.io 上有表单示例：https://angular.io/resources/live-examples/forms/ts/plnkr.html。如果您在 Chrome 以外的浏览器（如 Firefox、Edge、IE11）中尝试此示例，则选择元素不会检测到更改。 有没有其他人注意到这个问题或者我错过了什么？因为像 Select 这样的下拉元素中的变化检测是一个基本的事情......我简直不敢相信它不起作用。

【参考方案1】：

此问题已在 beta.16 https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 中修复

【参考方案2】：

我认为这个答案可以为您提供解决方法和马克的答案：

How can I get new selection in "select" in Angular 2?

这里有一些代码：

@Component(
  (...)
  template: `
    <select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)">
      <option *ngFor="#i of devices">i</option>
    </select>
  `)
  export class SomeComponent 

    onChange(newValue) 
      console.log(newValue);
      this.selectedDevice = newValue;
      // ... do other stuff here ...
    
  

【讨论】：

谢谢。我会接受你的回答，因为它是临时解决方案的正确答案。我忘了说，我用旧的 JQuery 做了我自己的解决方案。我只是不确定我是否遗漏了文档中的某些内容。很长一段时间，我们的项目都是 alpha 版本，一切都很好。我想既然他们说他们在 AdWords 内部使用 Angular2，他们就解决了这个基于 html 的问题。不用说我很失望。

【参考方案3】：

the angular github也讨论了这个问题

添加 Angular 用于对其框架进行单元测试的垫片（在所有其他脚本之前）有助于解决许多 IE 问题： https://github.com/angular/angular/blob/master/modules/angular2/src/testing/shims_for_IE.js

这个特殊情况是由这个特殊函数解决的。

if (!Object.hasOwnProperty('name')) 
    Object.defineProperty(Function.prototype, 'name', 
        get: function() 
            var matches = this.toString().match(/^\s*function\s*(\S*)\s*\(/);
            var name = matches && matches.length > 1 ? matches[1] : "";
            // For better performance only parse once, and then cache the
            // result through a new accessor for repeated access.
            Object.defineProperty(this, 'name', value: name);
            return name;
        
    );