Question

我正在使用Angular7。我必须根据groupby管道的结果动态创建一个嵌套的材质菜单。我在视图中获取数据，但是单击根项目时菜单不会触发任何操作。我没有从角度报告任何错误。

如果我将菜单绑定到原始分组数据上，那么一切都将完美工作。

这是我的自定义管道：

import { Pipe, PipeTransform } from '@angular/core';

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

    transform(collection: Array<any>): Array<any> {

        if(!collection) {
            return null;
        }

        const groupedCollection = collection
          .filter(item => item.category != null && item.category != '')
          .reduce((previous, current)=> {
                if(!previous[current.category]) {
                    previous[current.category] = [current];
                }
                else {
                    previous[current.category].push(current);
                }

            return previous;
        }, {});

        return Object.keys(groupedCollection).map(key => ({
            label: key,
            settings: groupedCollection[key]
        }));
    }
}

这是我视图的代码

<span *ngFor="let category of settings | GroupByCategoryPipe">

    <button mat-raised-button [matMenuTriggerFor]="childMenu">
      {{category.label}}
    </button>

    <mat-menu #childMenu="matMenu">

      <ng-container matMenuContent *ngFor="let setting of category.settings">
        <button mat-menu-item>
            {{setting.name}}
        </button>
      </ng-container>

    </mat-menu>

</span>

我尝试制作一个example on StackBlitz，但遇到了同样的问题。

有人知道我在做什么错吗？

感谢任何想法或帮助：）

Answer 1

找到了。如果将管道设置为“纯”（pure：true），则它可以工作。我想这是因为：

Angular在每个组件更改检测周期内执行不纯管道。不洁的管道经常被调用，就像每次击键或鼠标移动一样。 （official doc）

我想菜单触发更改检测周期，并且再次调用管道...

Groupby管道结果中的Angular 7动态嵌套材料菜单

1 个答案: