Question

我在前端使用select-tag从数据库中检索类型中的电影。它通过角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）计算机时，它会运行clearSearch（）两次，一次在getGenres（）之前，一次在getGenres（）之后。我不明白为什么，任何人都有这样的问题经验？

Answer 1

click运行两次，因为它附加到select事件。有一次当你点击clearSearch()元素来显示de dropdown时，有一次你点击选择dere of the genre（恐怖/浪漫）。

您应该在组件的ngOnInit()函数中运行<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
}

组件：

.onoffswitch {
  position: relative;
  width: 90px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #34A7C1;
  color: #FFFFFF;
}

.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #EEEEEE;
  color: #999999;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 6px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  border: 2px solid #999999;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
  right: 0px;
}

Angular（单击）功能仅在macOS

1 个答案: