Угловой 5 матмен

Я пытаюсь создать динамическое меню для своей электронной коммерции и получаю следующую ошибку:

Error: mat-menu-trigger: must pass in an mat-menu instance!

Кто-нибудь знал, как решить эту ошибку. Как я могу сделать [matMenuTriggerFor] и #main_menu динамическими?

В моем списке несколько магазинов! Все просто. Эти два атрибута нужны только в динамическом формате.

<button mat-button [matMenuTriggerFor] = "i" *ngFor = "let shop of shopey; let 
i=index">{{shop.name}}
</button>
<mat-menu #main_menu = "matMenu">
 <ng-container *ngFor = "let shop of shopey">
 </ng-container>
</mat-menu>

Исправить форматирование.

— 07.12.2018 16:12

angular5

07.12.2018 13:39

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

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

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 517

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте следующее ...

Переместите ваш цикл *ngFor в оболочку span

 <span *ngFor = "let shop of shopey; let i=index">

А затем поменяйте #main_menu на #i

<span *ngFor = "let shop of shopey; let i=index">
 <button mat-button [matMenuTriggerFor] = "i" >{{shop.name}}
 </button>
 <mat-menu #i = "matMenu">
  <ng-container>
    this is a test of the container
  </ng-container>
 </mat-menu>
</span>

Stackblitz

https://stackblitz.com/edit/angular-wu6dl4?embed=1&file=app/menu-overview-example.ts

07.12.2018 15:19