单击时从特定项目获取数据

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>

组件网

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

单击时从特定项目获取数据

get data from a particular item on clicking

angular

angular5

angular6