Angular 5 console.log选定的导航列表项

Question

I am trying to dynamicaly create a sidenav from a remote JSON, which is working fine, it is getting the JSON from the URL and parsing it into a nav list. Now i want to console.log the selected nav list item, which i can't do, i looked up several solutions online but no use. Here is my code:

the service:

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 template:

<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>

Answer 1

i am not sure i get what you are trying to do, but if you want the selected menu you should just change

   <mat-list-item (click)="menuService.ispisi($event)" *ngFor="let app of menuService.apps">
      {{app.REGISTARSKI_BROJ}}
    </mat-list-item>

to something like this

<mat-list-item (click)="menuService.ispisi(app)" *ngFor="let app of menuService.apps">
      {{app.REGISTARSKI_BROJ}}
    </mat-list-item>

this way you will have access to the selected menu, and you can from there implement your selected logic