Angular 8 - Скрыть кнопку меню мата, если нет элементов

Question

У меня есть *ngFor, в котором я устанавливаю значения mat-menu-item значений для заполнения mat-menu.

Значения устанавливаются динамически с использованием фильтра.

Проблема в том, что иногда пользовательский канал фильтра не возвращает результаты, а mat-menu остается пустым.

...

<button mat-icon-button
    matTooltip="Select alternative style"
    [matMenuTriggerFor]="menu">
    <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
    <div *ngFor="let style of styles | filterPipe: filteredLayers[i].name">
         <button  mat-menu-item>
             <span> {{ style.name }} </span>
         </button>
    </div>
</mat-menu>

...

filterPipe похож на это

@Pipe({
  name: 'filterPipe'
})
export class FilterStylePipe implements PipeTransform {
  transform(styles: any[], layer: string): any {
    const result = styles.filter(elem => elem.name.startsWith(layer.substring(0, 3)));
    if(result.length!==0) {
      return result;
    }
  }
}

Как я могу динамически не показывать (или не создавать) mat-icon-button или mat-menu? Или даже отключить его?

ADDENDUM

Одним из возможных решений является реализация функции (menuIsNotEmpty(i)), которая возвращает логическое значение

...

<button mat-icon-button *ngIf="menuIsNotEmpty(i)"
    matTooltip="Select alternative style"
    [matMenuTriggerFor]="menu">
    <mat-icon>more_vert</mat-icon>
</button>

...

, тогда как

  menuIsNotEmpty(index) {
    const result = this.styles.filter(elem => elem.name.startsWith(this.filteredLayers[index].name.substring(0, 3)));
    if(result.length!==0) {
      return true;
    }
    return false;
  }

Он работает, но имеет избыточный код, и фильтрация выполняется дважды для массива. Я не думаю, что это оптимальный способ сделать это. Я все еще ищу, как это сделать динамически.

Answer 1

Я добавлю новую переменную в файл .ts, как этот

@Pipe({
  name: 'filterPipe'
})
export class FilterStylePipe implements PipeTransform {
  myResult:any;

  transform(styles: any[], layer: string): any {
    const result = styles.filter(elem => elem.name.startsWith(layer.substring(0, 3)));
    if(result.length!==0) {
      this.myResult = result;
    }
  }
}

И в шаблоне я буду использовать *ngIf

...

<button *ngIf="myResult" mat-icon-button
    matTooltip="Select alternative style"
    [matMenuTriggerFor]="menu">
    <mat-icon>more_vert</mat-icon>
</button>
<mat-menu *ngIf="myResult" #menu="matMenu">
    <div *ngFor="let style of styles | filterPipe: filteredLayers[i].name">
         <button  mat-menu-item>
             <span> {{ style.name }} </span>
         </button>
    </div>
</mat-menu>

...

Надеюсь, это поможет!

Answer 2

<ng-container *ngIf="(styles | filterPipe: filteredLayers[i].name).length > 0">    
    <button mat-icon-button
        matTooltip="Select alternative style"
        [matMenuTriggerFor]="menu">
        <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
        <div *ngFor="let style of styles | filterPipe: filteredLayers[i].name">
             <button  mat-menu-item>
                 <span> {{ style.name }} </span>
             </button>
        </div>
    </mat-menu>
</ng-container>

Пожалуйста, дважды проверьте это выражение (styles | filterPipe: filteredLayers[i].name).length > 0 для исключения нулевой ссылки.