点击即可从特定项目获取数据

Question

我有一个存储在名为“ permissions”的数组中的项目列表，数据是这样的

当我单击特定项目时，我只希望显示特定项目数据。

component.html

<a class="selected"  (click)="displayPermission()">click</a>

component.ts

displayPermission(){
//what will be the logic inside here;
console.log(logic needed); 
}

Answer 1

尝试

模板

<div *ngFor="let item of items">
  <a class="selected"  (click)="displayPermission(item)">click</a>
</div>

componenet

displayPermission(data){
  consolelog(data);
  console.log(logic needed); 
}

Answer 2

您可以使用*ngFor伪指令在.html中显示数据，该伪指令将遍历您要单击的项目列表，您可以使用数组中该特定项目的index调用函数。

.component.html

permissions = [{},{},{}] 

showData(index){
  // Do anything with the selected item
  console.log(permissions[index]);
}

.component.html

<div *ngFor="let p of permissions;let i = index">
  <button (click)="showData(i)">Permission {{i}}</button>
</div>

Answer 3

  

component.html

<ng-container *ngFor="let item of permissions">
    <a class="selected"  (click)="displayPermission(item)">click</a>    
    <ng-container *ngIf="item.open">
        <!-- html for item details -->
        <p>{{item.group_id}}<p>
    </ng-container>
</ng-container>

  

component.ts

displayPermission(item){
    item.open = !item.open;
}