访问基于ngFor构建的角度组件中的单个对象

Question

我有一个角度组件，如下所示，它在左侧导航中显示了来自后端的列表。

<div *ngFor="let navItem of navItemList" >
  <div style="height:24px; padding-top:7px">
   <a style="font-size: 10pt;color:#455A64; padding-left:18px;">
    <span
    style="font-weight: bold;"
    matTooltip="{{ navItem.name }} Reports"
    matTooltipPosition="right" >
    <i class="fa {{ navItem.icon }} fa-md" aria-hidden="true"></i>
    {{ navItem.name }}
    </span>
   </a>
  </div>
<mat-divider></mat-divider>
</div>

下面是.ts文件

@Component({
  selector: 'child-nav-list',
  templateUrl: './child.nav.list.component.html'
})
export class ChildNavListComponent {
  @Input() icon = '';
  @Input() navItemList: Array<any>
constructor() {
 console.log( this.navItemList);
 }
}

我在父级组件中使用上述组件，如下所示

在TS文件中

 navItemList: Array<any> = [{name: 'Report1', icon: 'fa-file'}, { name: 'Report2',  icon: 'fa-file'}, { name: 'Report3',  icon: 'fa-file'}]

在html

中

    <child-nav-list (click) = "reportsCLick($event)" [navItemList] = "navItemList$ | async" ></child-nav-list>

结果如下所示。

因此，当我单击一个报表时，无法获得被单击的对象。如何处理被点击的对象？

Answer 1

在子级上设置@Output EventEmitter

@Component({
  selector: 'child-nav-list',
  templateUrl: './child.nav.list.component.html'
})
export class ChildNavListComponent {
  @Input() icon = '';
  @Input() navItemList: Array<any>;
  @Output() emitter: EventEmitter;

  constructor() {
   console.log( this.navItemList);
  }

  onClickItem(item){
    this.emitter.emit(item);
  }
}

将带有点击事件的子html设置为 8ytan 说：

 <div *ngFor="let navItem of navItemList" (click)="onClickItem(navItem)">
 ...
</div>

设置事件发生时的父组件功能；

    <child-nav-list (emitter) = "reportsCLick($event)" [navItemList] = "navItemList$ | async" ></child-nav-list>

Answer 2

您的(click)看起来像是在整个列表中-而是将其放在导航列表中，而不是整个列表中。

<div *ngFor="let navItem of navItemList" (click)="onClickItem(navItem)">
  <div style="height:24px; padding-top:7px">
   <a style="font-size: 10pt;color:#455A64; padding-left:18px;">
    <span
    style="font-weight: bold;"
    matTooltip="{{ navItem.name }} Reports"
    matTooltipPosition="right" >
    <i class="fa {{ navItem.icon }} fa-md" aria-hidden="true"></i>
    {{ navItem.name }}
    </span>
   </a>
  </div>
<mat-divider></mat-divider>
</div>

然后在您的TS中：

@Component({
  selector: 'child-nav-list',
  templateUrl: './child.nav.list.component.html'
})
export class ChildNavListComponent {
  @Input() icon = '';
  @Input() navItemList: Array<any>
constructor() {
 console.log( this.navItemList);
 }

 onClickItem(item) {
  console.log(item);
 }
}

然后，您可以使用Output()将单击的项目传递回父组件。

有帮助吗？