AngularJS ng-change 无法正常工作答案

【问题标题】：AngularJS ng-change not working correctlyAngularJS ng-change 无法正常工作
【发布时间】：2018-05-09 20:38:48
【问题描述】：

所以，这是我选择的 html：

    <select
    class="custom-select mb-2 col-md-4 col-12 mr-sm-2 mb-sm-0"
    ng-model="serverSelected"
    ng-change="onServerSelect(serverSelected)"
    >

    <option *ngFor="let server of servers"
            value="{{ server.display_name }}"
    >{{server.display_name}}</option>
    </select>

server.component.ts：

  onServerSelect(serverSelected){
console.log(this.serverSelected.displayName);}

如何让这个选定的 server.display_name 显示在我的 onServerSelect() 方法中，因为这不起作用。我做错了什么？

【问题讨论】：

您正在混合使用 AngularJS 和 Angular 语法。您的意思是ng-repeat 还是更好的ng-options？
是的，但是当我尝试使用 ng-options 时，它只是不工作，并且不显示任何数据。
*ngFor 是 Angular 2+ 的一个特性。您尝试使用 ng-repeat 吗？
阅读AngularJS <select> Directive API Reference - Using ngRepeat to generate select options。
@georgeawg 但是，我只使用 server.component.ts 和 server.component.html 那么我应该把这个控制器放在上面的例子中吗？抱歉，我是 Angular 的初学者，这让我很沮丧。我在组件中定义了服务器数组，但是当我使用 ng-repeat="server in servers"，然后尝试获取 server.id angular 时，未定义标识符“server”。

标签： javascript angularjs angular-ngmodel ngfor angularjs-ng-change

【解决方案1】：

这样做

为什么在角度 1 中混合 *ngFor

语法必须是 ng-repeat。

角度 1 例如。 ng模型， ng-如果， ng-重复，等等

角度 2 > *ngModel, *ng如果， *ngFor, 等等

<select class="custom-select mb-2 col-md-4 col-12 mr-sm-2 mb-sm-0">

    <option ng-repeat="let server of servers" value="{{ server.display_name }}" ng-model="serverSelected">
<span ng-change="onServerSelect(serverSelected)">
{{server.display_name}}
</span>
</option>
    </select>

【讨论】：

【解决方案2】：

其实你用的是什么？ Angularjs 还是 Angular？如果您使用的是 Angularjs，那么您正在混合使用 Angular 语法 *ngFor。相反，您可以使用 ng-repeat 或 ng-options。阅读本文以获取更多信息AngularJs Select

【讨论】：