Question

我之前通过提供文本输入构建了一个Angular 2列表过滤器，但它是在新的@angular/forms模块发布之前，我还没有更新它。我最近开始了一个使用新表单模块的新项目，但我无法弄清楚为什么我所做的不起作用。

这很简单：在其上设置[(ngModel)]的文本输入，将ngModel变量传递到我的自定义管道中以过滤列表。这真的不是那么难。但这是HTML：

<form class="form-horizontal" #filterForm="ngForm">
    <div class="form-group">
        <label class="control-label col-md-5">Filter List</label>
        <div class="col-md-7">
            <input type="text" name="filterText" class="form-control" [(ngModel)]="filterObj.match">
        </div>
    </div>
</form>

只是一个基本的form。如果没有form元素，我会在ngModel上放置input时收到错误。

然后在打印出列表：

<li *ngFor="let item of list | filter:filterObj">{{item.title}}</li>

问题是，即使在ngModel上设置了input，也不会检测到任何更改，并且列表永远不会更新。我通过在类中放置ngOnChanges函数来确认该变量并且它永远不会改变。

是否有其他人在新@angular/forms版本中遇到此问题？

Answer 1

要进行调试，请尝试将ngModel解耦为：

<input [value]="currentHero.firstName"
       (input)="currentHero.firstName=$event.target.value" >

角度2列表过滤器

1 个答案: