Angular：带有管道的 ngFor 中的 Array.splice答案

【问题标题】：Angular : Array.splice in an ngFor with a pipeAngular：带有管道的 ngFor 中的 Array.splice
【发布时间】：2017-05-11 07:08:00
【问题描述】：

我有一个名单：names = ['test1', 'test2', 'test3']

我用一个简单的管道将它们显示在一个简单的布局中，该管道搜索所有名称，包括用户输入：

<input type="text" [(ngModel)]="query">
<div *ngFor="let n of names | filterBy: query">{{n}}</div>

名称旁边有一个小叉，可将其从列表中删除。

问题是当我删除一个我之前搜索过的项目（例如 test2）时，过滤器没有实现。 更改集合后是否可以刷新过滤器返回的内容？

【问题讨论】：

【解决方案1】：

是的，修改后使用slice()创建数组的副本，然后Angular会识别更改并再次调用管道。 Angular 不检查对象数组的内容是否有变化，只检查对象身份。

【讨论】：

使用管道的目的是避免创建数组的副本......真的没有其他办法吗？
您可以使管道不纯，然后在每次运行更改检测时调用它。这通常更糟。您还可以将人为的附加管道参数引入到每次修改源数组后都会增加的字段。 Angular 会识别出参数变化并再次调用管道。
如果只是变更检测的问题，还不如在我调用delete方法的时候调用变更检测器……我真的认为有一个干净、简单的方法可以做到这一点
如果您将OnPush 与不纯的管道一起使用可能会起作用，您需要小心不要经常调用管道。也许您还可以在管道中检查数组的内容是否已更改，然后才重新运行过滤器（另请参阅stackoverflow.com/questions/42962394/…）哪个选项最有效也取决于数组的预期最大大小。跨度>
最后我使用了一个双管道：一个纯管道（用于大尺寸的数组）和一个不纯管道（仅用于这个最大尺寸为 9-10 的示例）。感谢您的帮助！