[英]Angular 5 console.log selected nav list item
我正在尝试从远程JSON动态创建sidenav,效果很好,它是从URL获取JSON并将其解析为导航列表。 现在,我要console.log所选的导航列表项目,但我不能这样做,我在线查找了几种解决方案,但没有用。 这是我的代码:
服务:
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
interface Applications {
AUTO_ID: number;
REGISTARSKI_BROJ: string;
AUTO_TIP: string;
GODINA_PROIZVODNJE: string;
TIP_MOTORA: string;
BROJ_SASIJE: string;
SNAGA_HP: number;
KUPAC_ID: number;
}
@Injectable()
export class MenuService {
objectKeys = Object.keys;
private url = `MY_URL`;
public apps: Applications[];
constructor(public router: Router, protected http: HttpClient) { }
menu(e) {
e.preventDefault();
this.http.get(this.url).subscribe(result => {
this.apps = result as Applications[];
}, error => console.error(error));
}
ispisi(e) {
e.preventDefault();
console.log(this.apps); // WHEN I DO IT LIKE THIS, IT LOGS ALL OF THE OBJECTS TO THE CONSOLE
this.router.navigate(['table']);
}
}
HTML模板:
<mat-sidenav-container>
<mat-sidenav #sidenav mode="push">
<mat-toolbar>
Glavni meni
</mat-toolbar>
<mat-nav-list>
<mat-list-item (click)="sidenav.toggle()" [routerLink]="['/']"><i class="material-icons">assessment</i>Dashboard</mat-list-item>
<mat-accordion>
<mat-expansion-panel (click)="menuService.menu($event)">
<mat-expansion-panel-header>
<mat-panel-title>
<i class="material-icons">directions_car</i>Automobili
</mat-panel-title>
</mat-expansion-panel-header>
<mat-nav-list *ngIf="menuService.apps">
<mat-list-item (click)="menuService.ispisi($event)" *ngFor="let app of menuService.apps">
{{app.REGISTARSKI_BROJ}}
</mat-list-item>
</mat-nav-list>
</mat-expansion-panel>
</mat-accordion>
</mat-nav-list>
</mat-sidenav>
<mat-toolbar color="primary">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button> Service stats
<span class="example-spacer"></span>
<button (click)="authService.logOut()" matTooltip="Izloguj se" matTooltipPosition="below" class="user" mat-icon-button>
<i class="material-icons">account_circle</i>
</button>
</mat-toolbar>
</mat-sidenav-container>
我不确定我是否知道要执行的操作,但是如果要选择菜单,就应该更改
<mat-list-item (click)="menuService.ispisi($event)" *ngFor="let app of menuService.apps">
{{app.REGISTARSKI_BROJ}}
</mat-list-item>
像这样
<mat-list-item (click)="menuService.ispisi(app)" *ngFor="let app of menuService.apps">
{{app.REGISTARSKI_BROJ}}
</mat-list-item>
这样,您将可以访问所选菜单,并且可以从此处实施所选逻辑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.