javascript - 使用(更改)Angular 5 访问数组的每个部分

Question

我正在尝试创建一个框，您可以在其中单击其中的每个选项，它将过滤来自 Firebase 数据库的数据。到目前为止，我已经可以正常工作了，你可以点击它们中的每一个。但是，我只能让它执行一项任务。

每个选项都来自此数组:

items: number[] = [1,2,3,4,5,6,7,8,9];

过滤来自这个函数:

filterByBedrooms(bedrooms: number) {
   this.bedFilter.next(bedrooms);
   console.log('clicked')
 }

然后我有这样的形式，我可以在其中调用该函数:

 <form  #fSearchPropertiesByBedrooms (change)="filterByBedrooms(items[4])">
          <select class="form-control form-control-lg small-drop-down" type="number"  [(ngModel)]="bedrooms" name="bedrooms">
            <option [ngValue]="undefined" selected>Beds</option>
            <option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
          </select>
          <!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
        </form>

现在显然在这里我绑定(bind)到函数和数组，如下所示:

(change)="filterByBedrooms(items[4])" 

我知道我需要做的是以某种方式绑定(bind)到它，如下所示:

(change)="filterByBedrooms(item)"

但是，*ngFor 位于这部分之后，因此它不起作用。

我的问题是，如何绑定(bind)(更改)到选择框中的每个选项(来自数组)，而不仅仅是数组的一部分？

Answer 1

您不将事件绑定(bind)到您的选项，而是将其绑定(bind)到您的选择。

您可以亲自查看:选择带有 ngModel 属性，而不是选项。

将其视为文本类型的输入，具有预定义的结果。

因此，只需像这样使用绑定(bind)的 ngModel 调用您的方法即可。

<select
  class="form-control form-control-lg small-drop-down"
  type="number"
  [(ngModel)]="bedrooms"
  name="bedrooms"
  (change)="filterByBedrooms(bedrooms)">