Angular 5 console.log選定的導航列表項

Question

我正在嘗試從遠程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>

Answer 1

我不確定我是否知道要執行的操作，但是如果要選擇菜單，就應該更改

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

這樣，您將可以訪問所選菜單，並且可以從此處實施所選邏輯