Angular(单击)功能仅在MACOS中正常工作

Question

im使用我的前端中的选择标签来从数据库中检索电影。它是通过Angular 4和MongoDB完成的。前端看起来像这样：

<select name="select" id="selectGenre" (click)="clearSearch()" (change)="getGenres()" [(ngModel)]="wantGenre">
        <option value="null" disabled="true" [selected]="true">Select genre: </option>
        <option name="horror" value="Horror">Horror</option>
        <option name="romance" value="Romance">Romance</option>
        ...
</select>

这不是一个完美的功能，但是ClearSearch（）接收数据库中的所有电影，然后GetGenres（）将所有电影都纳入给定的类型。我们这样做以轻松改变流派。

问题是：此功能在MACOS中起着完美的作用。我们每次都会以给定类型的方式获得电影。但是，当我们使用Linux或Windows（10）-Computer尝试时，它将两次运行clearSearch（），一次在getGenres（）之前和一个之后getGenres（）之后。我不明白为什么，有人在这样的问题上有任何经验？

Answer 1

clearSearch()运行两次，因为它已连接到click事件。一次单击select元素以显示DE下拉列表时，一次单击以选择类型的DEATER（恐怖/浪漫）。

您应该在组件中的ngOnInit()函数中一次运行clearSearch()，以加载数据，而不是在视图中。

查看：

    <select name="select" id="selectGenre" (change)="getGenres()" [(ngModel)]="wantGenre">
      <option value="null" disabled="true" [selected]="true">Select genre: </option>
      <option name="horror" value="Horror">Horror</option>
      <option name="romance" value="Romance">Romance</option>
      ...
    </select>

组件：

import { OnInit } from '@angular/core';
...
@Component({...})
export class Movies implements OnInit {
constructor(...)
ngOnInit() {
  clearSearch();
}
clearSearch() {
  //Code that retrive all movies list from server
}