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>

现在显然在这里我将绑定到函数和数组，如下所示：

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

我知道我需要做的是这样绑定它：

(change)="filterByBedrooms(item)"

但是，* ngFor在此部分之后，因此不起作用。

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

Answer 1

您没有将事件绑定到选项，而是将其绑定到您的选择。

您可以自己查看：select带有ngModel属性，而不是选项。

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

因此只需像这样用绑定的ngModel来调用您的方法。

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

Answer 2

您可以这样做，只需声明select的标识符并在您的方法中使用该值即可。

<form  #fSearchPropertiesByBedrooms (change)="filterByBedrooms(bedrooms.value)">
              <select class="form-control form-control-lg small-drop-down" type="number"  [(ngModel)]="bedrooms" name="bedrooms" #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>

我还注意到您已经绑定了可变卧室以供选择。这意味着您在控制器中具有该变量，因此您可以将filterByBedrooms方法重新定义为类似

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

如果您使用的是第二个示例，则表单将如下所示

<form  #fSearchPropertiesByBedrooms (change)="filterByBedrooms()">
                  <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>

Answer 3

我建议您在使用ngModel绑定时尽量使用（ngModelChange）事件，因此代码应类似于：

 <form  #fSearchPropertiesByBedrooms>
      <select class="form-control form-control-lg small-drop-down" type="number"  [(ngModel)]="bedrooms" name="bedrooms" (ngModelChange)="filterByBedrooms($event)">
        <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>

实际上，我不确定您是否需要此特定控件的表单，因为我看到您评论了“提交”按钮，因此可以简化为：

  <select class="form-control form-control-lg small-drop-down" type="number"  [(ngModel)]="bedrooms" name="bedrooms" (ngModelChange)="filterByBedrooms($event)">
    <option [ngValue]="undefined" selected>Beds</option>
    <option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
  </select>

别忘了在filterByBedrooms函数上添加值检查，就像您通过使用未定义的值调用一样。

使用（更改）Angular 5访问数组的每个部分

3 个答案: