получить данные из определенного элемента при нажатии

Question

У меня есть список элементов, хранящихся в массиве с именем «разрешения», и данные выглядят так:

Когда я нажимаю на конкретный элемент, я хочу только конкретныйданные об элементах для отображения.

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

Вы можете отобразить данные в формате .html, используя директиву *ngFor, которая будет перебирать ваш список элементов, по нажатию которых вы можете вызывать функцию с 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 2

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

Answer 3

попробуйте

шаблон

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

компонент

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