変数を使用してmat-menu要素を[matMenuTriggerFor]に指定しますか？

マテリアル2を使用してテーブルドリブンのカスケードメニューを実装しようとしたが、変数を使用して[matMenuTriggerFor]にマットメニュー要素名の値を代入しようとするとランタイムエラーが発生する角度の初心者です。私が見つけたすべての例では、マットメニューの要素名を指定するテキスト文字列を使用しています。私は[matMenuTriggerFor]へのバインディングがうまくいかなかったが、閉じられていたバグとしてgithubレポートの1ヶ月前の投稿を見つけたが、他の誰かが同様の問題を経験していることを示すウェブ上の投稿を見つけることができなかったマテリアルバージョン4.xxに関連する問題です。 [matMenuTriggerFor]は式の値を期待しているようですが、私の試行はうまくいきません。私は間違って何をしていますか？変数を使用してmat-menu要素を[matMenuTriggerFor]に指定しますか？

私は勝利10日午前、私のブラウザは、Firefox 57.0.2

マイ角度のバージョンである：

Angular CLI: 1.5.0 
Node: 6.11.3 
OS: win32 x64 
Angular: 5.1.2 
... animations, common, compiler, compiler-cli, core, forms 
... http, language-service, platform-browser 
... platform-browser-dynamic, router 

@angular/cdk: 5.0.2 
@angular/cli: 1.5.0 
@angular/material: 5.0.2 
@angular-devkit/build-optimizer: 0.0.36 
@angular-devkit/core: 0.0.22 
@angular-devkit/schematics: 0.0.42 
@ngtools/json-schema: 1.1.0 
@ngtools/webpack: 1.8.0 
@schematics/angular: 0.1.11 
@schematics/schematics: 0.0.11 
typescript: 2.4.2 
webpack: 3.8.1

マイapp.module.ts：

import { BrowserModule }   from '@angular/platform-browser'; 
import { NgModule }     from '@angular/core'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { MatMenuModule }   from '@angular/material/menu'; 
import { MatToolbarModule }   from '@angular/material/toolbar'; 
import { MatIconModule }   from '@angular/material/icon'; 
import { MatListModule }   from '@angular/material/list'; 


import { AppComponent }    from './app.component'; 
import { NestedMenusComponent }  from './nested-menus/nested-menus.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    NestedMenusComponent 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    MatMenuModule, 
    MatToolbarModule, 
    MatIconModule, 
    MatListModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

マイcomponent.ts ：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-nested-menus', 
    templateUrl: './nested-menus.component.html', 
    styleUrls: ['./nested-menus.component.scss'] 
}) 
export class NestedMenusComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { } 

    selected :string; 
    menuItems = [ 
    {text: "Tabledriven.Item1" }, 
    {text: "Tabledriven.Item2", templateName: "submenu"}, 
    ]; 

    select(pText :string) 
    { 
    this.selected = pText; 
    } 
}

component.html：

<div> 
    <p>You selected: {{ selected }}</p> 

    <div class="demo-menu"> 
    <div class="menu-section"> 
     <p>Basic Menu</p> 
     <mat-toolbar> 
     <button mat-icon-button [matMenuTriggerFor]="basic"> 
      <mat-icon>more_vert</mat-icon> 
     </button> 
     </mat-toolbar> 

     <mat-menu #basic="matMenu"> 
     <button mat-menu-item (click)="select('Basic.Item1')">Basic.Item1</button> 
     <button mat-menu-item [matMenuTriggerFor]="submenu">Basic.Item2</button> 
     </mat-menu> 
    </div> 

    <div class="menu-section"> 
     <p>Table-driven Menu</p> 
     <mat-toolbar> 
     <button mat-icon-button [matMenuTriggerFor]="tabledriven"> 
      <mat-icon>more_vert</mat-icon> 
     </button> 
     </mat-toolbar> 

     <mat-menu #tabledriven="matMenu"> 
     <ng-container *ngFor="let item of menuItems"> 
      <button *ngIf=!item.templateName mat-menu-item (click)="select(item.text)">{{ item.text }}</button> 
      <button *ngIf=item.templateName mat-menu-item [matMenuTriggerFor]=item.templateName>{{ item.text }}</button> 
     </ng-container> 
     </mat-menu> 
    </div> 

    <mat-menu #submenu="matMenu"> 
     <button mat-menu-item (click)="select('Submenu.Item1')">Submenu.Item1</button> 
     <button mat-menu-item (click)="select('Submenu.Item2')">Submenu.Item2</button> 
    </mat-menu> 
    </div> 
</div>

表ドリブンのメニューは、ユーザーの入力前に実行時エラーがスローされます。

ERROR 
TypeError: this.menu.close is undefined 
Stack trace: 
[email protected]:///../../../material/esm5/menu.es5.js:771:9 
[email protected]:///../../../core/esm5/core.js:12929:9 
[email protected]:///../../../core/esm5/core.js:12903:13 
[email protected]:///../../../core/esm5/core.js:12886:29 
[email protected]:///../../../core/esm5/core.js:14036:5 
[email protected]:///../../../core/esm5/core.js:14383:21 
[email protected]:///../../../core/esm5/core.js:14341:17 
[email protected]:///../../../core/esm5/core.js:14033:5 
[email protected]:///../../../core/esm5/core.js:14383:21 
[email protected]:///../../../core/esm5/core.js:14341:17 
[email protected]:///../../../core/esm5/core.js:14033:5 
[email protected]:///../../../core/esm5/core.js:14383:21 
[email protected]:///../../../core/esm5/core.js:14315:13 
[email protected]:///../../../core/esm5/core.js:14038:5 
[email protected]:///../../../core/esm5/core.js:14383:21 
[email protected]:///../../../core/esm5/core.js:14315:13 
[email protected]:///../../../core/esm5/core.js:14038:5 
[email protected]:///../../../core/esm5/core.js:15286:39 
[email protected]:///../../../core/esm5/core.js:14823:12 
[email protected]:///../../../core/esm5/core.js:11797:13 
ApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6104:58 
[email protected]:///../../../core/esm5/core.js:6104:13 
[email protected]:///../../../core/esm5/core.js:6170:9 
[email protected]:///../../../core/esm5/core.js:6058:9 
PlatformRef.prototype._moduleDoBootstrap/<@webpack-internal:///../../../core/esm5/core.js:5778:74 
[email protected]:///../../../core/esm5/core.js:5778:13 
PlatformRef.prototype.bootstrapModuleFactory/</</<@webpack-internal:///../../../core/esm5/core.js:5699:21 
[email protected]:///../../../../zone.js/dist/zone.js:392:17 
[email protected]:///../../../core/esm5/core.js:4949:24 
[email protected]:///../../../../zone.js/dist/zone.js:391:17 
[email protected]:///../../../../zone.js/dist/zone.js:142:24 
scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:873:52 
[email protected]:///../../../../zone.js/dist/zone.js:425:17 
[email protected]:///../../../core/esm5/core.js:4940:24 
[email protected]:///../../../../zone.js/dist/zone.js:424:17 
[email protected]:///../../../../zone.js/dist/zone.js:192:28 
[email protected]:///../../../../zone.js/dist/zone.js:602:25 
NestedMenusComponent.html:29:10 
View_NestedMenusComponent_3 
NestedMenusComponent.html:29:10 
DebugContext_.prototype.logError 
core.js:15030 
ErrorHandler.prototype.handleError 
core.js:1488 
ApplicationRef.prototype.tick/< 
core.js:5915:54 
ZoneDelegate.prototype.invoke 
zone.js:392 
Zone.prototype.run 
zone.js:142 
NgZone.prototype.runOutsideAngular 
core.js:4701:47 
ApplicationRef.prototype.tick 
core.js:5915 
ApplicationRef.prototype._loadComponent 
core.js:5974 
ApplicationRef.prototype.bootstrap 
core.js:5862 
PlatformRef.prototype._moduleDoBootstrap/< 
core.js:5582:65 
PlatformRef.prototype._moduleDoBootstrap 
core.js:5582 
PlatformRef.prototype.bootstrapModuleFactory/</</< 
core.js:5503 
ZoneDelegate.prototype.invoke 
zone.js:392 
onInvoke 
core.js:4753 
ZoneDelegate.prototype.invoke 
zone.js:391 
Zone.prototype.run 
zone.js:142 
scheduleResolveOrReject/< 
zone.js:873 
ZoneDelegate.prototype.invokeTask 
zone.js:425 
onInvokeTask 
core.js:4744 
ZoneDelegate.prototype.invokeTask 
zone.js:424 
Zone.prototype.runTask 
zone.js:192 
drainMicroTaskQueue 
zone.js:602 
ERROR CONTEXT 
Object { view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…} } 
NestedMenusComponent.html:29:10 
Angular is running in the development mode. Call enableProdMode() to enable the production mode. 
core.js:3660 
[WDS] Disconnected! 
client:164

必要に応じて、基本的なメニューが動作します。表ドリブンメニューが開かれると、メニューの2つの項目が表示され、2番目の項目は、サブメニューが公開することを示すアイコンが含まれていますが、次のランタイムエラーがスローされます。

ERROR 
TypeError: templateRef is undefined 
Stack trace: 
[email protected]:///../../../core/esm5/core.js:11626:30 
[email protected]:///../../../cdk/esm5/portal.es5.js:448:40 
[email protected]:///../../../cdk/esm5/portal.es5.js:303:20 
[email protected]:///../../../cdk/esm5/overlay.es5.js:647:45 
[email protected]:///../../../material/esm5/menu.es5.js:861:13 
[email protected]:///../../../material/esm5/menu.es5.js:1185:13 
View_NestedMenusComponent_3/<@ng:///AppModule/NestedMenusComponent.ngfactory.js:64:23 
[email protected]:///../../../core/esm5/core.js:13777:115 
[email protected]:///../../../core/esm5/core.js:15286:39 
[email protected]:///../../../core/esm5/core.js:14873:12 
[email protected]:///../../../core/esm5/core.js:10186:16 
renderEventHandlerClosure/<@webpack-internal:///../../../core/esm5/core.js:10807:38 
decoratePreventDefault/<@webpack-internal:///../../../platform-browser/esm5/platform-browser.js:2679:53 
[email protected]:///../../../../zone.js/dist/zone.js:425:17 
[email protected]:///../../../core/esm5/core.js:4940:24 
[email protected]:///../../../../zone.js/dist/zone.js:424:17 
[email protected]:///../../../../zone.js/dist/zone.js:192:28 
[email protected]:///../../../../zone.js/dist/zone.js:499:24 
[email protected]:///../../../../zone.js/dist/zone.js:1540:9 
[email protected]:///../../../../zone.js/dist/zone.js:1566:17 
NestedMenusComponent.html:29:10 
ERROR CONTEXT 
Object { view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…} } 
NestedMenusComponent.html:29:10

出典

2017-12-25 Tom Wright

実際には変数を動的にバインドすることはできないと思います...とにかく 'submenu'変数を' matMenu'にバインドするのも忘れてしまいました。 – Edric

不足しているバインディングを見つけるためにコードを慎重に検査する時間をとってくれてありがとう。添付されたコードを適切に編集しました。悲しいことに、訂正は結果を変えなかった。 :-(この方法でバインドすることができないことは私には欠点があるように見えますが、ツールが私たちが望むことをしていないときに、私たちは皆それを言っていませんか？ –

あなたは動的にすることができますあなたのメニューを作りなさい。
要素名ではなく、要素参照を保持するだけで済みます。

この目的で@ViewChildと@ViewChildrenを使用できます。

ここにコードのworking exampleがあります。

出典

2018-03-08 10:37:26

変数を使用してmat-menu要素を[matMenuTriggerFor]に指定しますか？

答えて

関連する問題