Матрица вложенности в дочернем компоненте: не может быть привязана к 'matMenuTriggerFor', так как это не известное свойство 'кнопки' - PullRequest
Новая
       9

Матрица вложенности в дочернем компоненте: не может быть привязана к 'matMenuTriggerFor', так как это не известное свойство 'кнопки'

0 голосов
/ 03 октября 2019

Я не могу заставить работать mat-menu в Angular с asp.net core 3.0. Я использую шаблон от visual studio: asp.net core 3.0 + angular с индивидуальными учетными записями пользователей.

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

компонент меню входа в систему <здесь происходит ошибка </p> 

<div class="" *ngIf="isAuthenticated | async">
    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item>Item 1</button>
        <button mat-menu-item>Item 2</button>
    </mat-menu>
</div>

Родительский компонент: 

<div class="grid-container main-color shadow text-main-color">
   <div class="flex flex-middle">
     <a class="" [routerLink]="['/']">Logo</a>
     <fa-icon class="" [icon]="faBars"></fa-icon>
   </div>
   <mat-form-field class="example-form-field">
     <input matInput type="text" placeholder="Search for..." [(ngModel)]="value">
     <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>
   <app-login-menu></app-login-menu>
 </div>

файл app.module 

import { AppMaterialModule } from './app.material.module';

@NgModule({
  declarations: [
  ],
  imports: [
    AppMaterialModule,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

файл app.material.module 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material';
import { MatButtonModule } from '@angular/material';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ],
  exports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class AppMaterialModule { }

Error: Template parse errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. ("<div class="" *ngIf="isAuthenticated | async">

    <button mat-button [ERROR ->][matMenuTriggerFor]="menu">Menu</button>

    <mat-menu #menu="matMenu">

        <button mat-menu-it"): ng:///ApiAuthorizationModule/LoginMenuComponent.html@1:23
There is no directive with "exportAs" set to "matMenu" ("enticated | async">

    <button mat-button [matMenuTriggerFor]="menu">Menu</button>

    <mat-menu [ERROR ->]#menu="matMenu">

        <button mat-menu-item>Item 1</button>

        <button mat-menu-item>Item 2"): ng:///ApiAuthorizationModule/LoginMenuComponent.html@2:14
'mat-menu' is not a known element:
1. If 'mat-menu' is an Angular component, then verify that it is part of this module.
2. If 'mat-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("If="isAuthenticated | async">

    <button mat-button [matMenuTriggerFor]="menu">Menu</button>

    [ERROR ->]<mat-menu #menu="matMenu">

        <button mat-menu-item>Item 1</button>

        <button mat-menu-i"): ng:///ApiAuthorizationModule/LoginMenuComponent.html@2:4

Спасибо

...