*ngFor 或 @for 女巫管道中的数组更改后刷新视图

Question

如果我在我的模板中使用数组

<div *ngFor="let project of projectsList | searchBy: ['name']:searchValue; index as i">
...

或

@for (project of projectsList | searchBy : ['name'] : searchValue; track project; let i = $index; ) {
  <div > 
  ...
}

女巫管

@Pipe({
    name: 'searchBy',
})
export class SearchByPipe implements PipeTransform {
    transform<T>(value: T[], columnKeys: string[], term: string): T[] { 
      ...
    }
...
}

然后在打字稿代码中，经过一些操作后，我将元素添加到数组中：

projectsList.push(newProject)

然后什么都没有改变（我没有在视图中看到新元素）。为什么以及如何解决它？

Answer 1

这是因为您仍然使用相同的数组（指向数组的“指针”

projectsList

没有改变）。另外，您使用

pure pipe

（默认为角度），这意味着只有输入对象（参数 - 这里是指向数组

projectsList

的“指针”）更改时才会触发。但如果只输入对象内部/结构变化但我们仍然对同一个对象进行操作，则不会触发。

如果您仍然想处理相同的对象（数组）并且不将管道更改为inpure（例如因为在代码中的许多地方使用） - 那么您可以使用以下解决方案：

向您的管道添加额外的可选参数

forceUpdate

：

transform<T>(value: T[], columnKeys: string[], term: string, forceUpdate?: any): T[] 

然后在模板中，您可以通过使用这个新参数与

array.length

来强制刷新（在从数组中添加或删除某些项目后，该参数会发生变化）

@for (project of projectsRoles | searchBy : ['name'] : searchValue : projectsRoles.length; track project; let i = $index; ) {
  <div > 
  ...
}

现在，因为管道参数

forceUpdate

随着数组长度的变化而改变值，那么Angular将触发管道并刷新视图。