Угловое 7 динамических вложенных материалов меню из результатов групповой трубы - PullRequest
Новая
       7

Угловое 7 динамических вложенных материалов меню из результатов групповой трубы

0 голосов
/ 05 марта 2019

Я работаю с Angular 7. Мне нужно динамически создавать вложенное меню материала из результата групповой трубы.Я получаю свои данные в виде, но меню ничего не вызывает при щелчке корневых элементов.У меня нет сообщений об ошибках от angular.

Все работает отлично, если я связываю свое меню с необработанными сгруппированными данными.

Вот мой пользовательский канал: 

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>

Я попытался создать пример для StackBlitz иЯ столкнулся с той же проблемой.

Кто-нибудь знает, что я делаю не так?

Спасибо за любые идеи или помощь:)

1 Ответ

0 голосов
/ 14 марта 2019

Нашел это.Если вы устанавливаете канал как «чистый» (pure: true), это работает.Я предполагаю, что это из-за этого:

Angular выполняет нечистую трубу во время каждого цикла обнаружения изменения компонента.Нечистый канал вызывается часто, так же часто, как каждое нажатие клавиши или движение мыши. ( официальный документ )

Я полагаю, что в меню запускается цикл обнаружения изменений, а каналпозвонил снова ...

...