Angular 5 实现选中侧边导航列表项的console.log输出

我明白你的问题啦——现在点击每个动态生成的列表项都会打印整个apps数组，你需要的是只打印当前选中的那一项对吧？咱们只需要做两处小修改就能搞定：

第一步：修改HTML模板的点击事件绑定 #

在你的<mat-list-item>标签里，把当前循环的app实例作为参数传递给ispisi方法：

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

第二步：更新服务中的ispisi方法 #

在MenuService里，修改ispisi方法，新增一个参数来接收选中的app，然后打印这个参数即可：

ispisi(e, selectedApp: Applications) {
  e.preventDefault();
  console.log(selectedApp); // 现在只会打印你点击的那一项了
  this.router.navigate(['table']);
}

为什么这样有效？ #

原来的代码里，ispisi方法只是打印this.apps——也就是整个数组的引用。现在我们把*ngFor循环里的每个app实例直接传递给方法，这样方法就能精准拿到你点击的那一个对象，而不是整个数组啦。

内容的提问来源于stack exchange，提问作者Aleksa Camilovic