为什么带有过滤器管道的 ngFor 会导致无限循环?

天使波耶

我有这种情况。复选框组件


    <section
        *ngFor="let group of model.groups | myfilter:term; let index = index">
        <div>
            <mat-checkbox
                        [checked]="group.allChecked"
                        [ngModel]="group.allChecked"
                        color="primary">
                {{ group.name }}
            </mat-checkbox>
        </div>
        <div>
            <ul>
                <li *ngFor="let checkbox of groups.checkboxes;">
                    <mat-checkbox
                        [checked]="checkbox.check"
                        [(ngModel)]="checkbox.check"
                        color="primary">
                        {{ checkbox.displayName }}
                    </mat-checkbox>
                </li>
            </ul>
        </div>
    </section>


在第二个组件中,我有

<mat-form-field
  appearance="outline">
  <mat-label>
    Search by
  </mat-label>
    <input
      matInput
      type="text"
      [(ngModel)]="filter">
    <mat-icon matPrefix fontIcon="icon-search"></mat-icon>
</mat-form-field>
    
<app-checkbox-group
   [datasource]="claims"
   [term]="filter"
>
</app-checkbox>

和这个管道

@Pipe({
  name: 'roleFilter',
  pure: false
})
export class myfilter implements PipeTransform {

  transform(groups: [], term: string): [] {
    if (!term) {
      return groups;
    }
    return groups
            .map(obj => {
                  return Object.assign({}, obj, {
                    checkboxes: obj.checkboxes.filter(el => el.displayName.includes(term))
                  })
                
            })
            .filter(obj => obj.checkboxes.length > 0)
  }
}

和组是这样的数据集

[
    {
      name: 'Group 1',
      allChecked: false,
      isIndeterminate: false,
      checkboxes: [
        {
          check: true,
          displayName: 'first',
          name: 'first',
          id: '1',
          isMandatory: false
        },
        {
          check: false,
          displayName: 'second',
          name: 'second',
          id: '2',
          isMandatory: false
        },
        {
          check: false,
          displayName: 'third',
          name: 'third',
          id: '3',
          isMandatory: false
        },
        {
          check: false,
          displayName: 'fourth',
          name: 'fourth',
          id: '4',
          isMandatory: false
        },
        {
          check: false,
          displayName: 'fifth',
          name: 'fifth',
          id: '5',
          isMandatory: false
        },
        {
          check: false,
          displayName: 'sixth',
          name: 'sixth',
          id: '6',
          isMandatory: false
        },
        {
          check: false,
          displayName: 'seventh',
          name: 'seventh',
          id: '7',
          isMandatory: false
        },
        {
          check: false,
          displayName: 'eighth',
          name: 'eighth',
          id: '8',
          isMandatory: false
        },
      ]
    }
  ]

当我开始在输入过滤器上输入时,为了减少数据集,如果我开始输入一个与任何 displayName 都不匹配的字母,所有组都被隐藏,并且它的工作正常。当我开始输入与复选框的某些 displayName 属性匹配的字母时,就会出现问题。我不明白为什么但是所有页面都冻结并且 map 函数被无限次调用。

问题似乎出Object.assign在 map 方法中。因为如果我改变这一行,obj.checkboxes = checkboxes: obj.checkboxes.filter(el => el.displayName.includes(term))它会起作用,但用过滤后的复选框替换原来的复选框。

天使波耶

根据@Andrei 评论

尝试添加 trackByIndex(idx) {return idx;} 方法并将其传递给像这样的两个 ngFor insatnce *ngFor="let checkbox of groups.checkboxes; trackBy: trackByIndex"

解决方案是在两个 *ngFor 指令上使用 trackBy 管道。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么会导致无限循环?

为什么这个while循环会导致无限循环?

在指令属性上使用过滤器会导致$ digest循环中的无限循环

反应:调用带有参数的函数会导致无限循环

为什么 useFetcher 会导致重新渲染无限循环?

为什么这个 setState 会导致无限循环?

为什么可选的快速枚举会导致无限循环?

为什么不重定向会导致无限循环?

为什么这段代码会导致无限循环

为什么facebook javascript登录代码会导致无限循环?

为什么这段代码会导致无限循环?

为什么带有GCC的x86上的整数溢出会导致无限循环?

为什么当我使用函数返回值并崩溃浏览器时 *ngFor 会无限循环?

为什么尝试使用for循环上升到2,147,483,647会导致无限循环?

为什么带有数组过滤器的 Promise.all 会导致空数组?

带有过滤器的多个 For 循环迭代(组合)以实现最高可能值

* ngFor循环与异步管道?

为什么通过scanf()输入意外的值类型会导致该程序进入无限循环

为什么在此bash脚本中使用参数移位会导致无限循环?

为什么从无限循环切换到TimerTask会导致CPU使用率下降?

为什么我的适配器接口模式会导致无限循环

为什么在Error()方法中调用fmt.Sprint(e)会导致无限循环?

为什么我的正则表达式会导致无限循环?

为什么canLoad函数在重新路由期间会导致无限循环?

为什么使用无限for循环将无符号整数相加会导致错误的结果?

具有无限循环的线程会导致CPU过多吗

将参数附加到现有URL会导致无限循环

使用r8寄存器作为循环计数器会导致无限循环-为什么?

为什么在没有“命令”的情况下从cd(shell函数)调用cd(内置)会导致无限循环?