在 *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[] { 
        ...
    }
    ...
}

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

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将触发管道并刷新视图。