Question

我正在尝试执行类似下面的操作 - 将选定的ID传递给组件代码，但这不起作用或似乎只是间歇性地工作（可能是某种时序问题？）。

<tr *ngFor="let user of userList">
    <td>{{ user.firstName }} {{ user.lastName }}</td>
    <td>{{ user.status}}</td>
    <td><a (click)="goToAccount(user.id)">{{user.userName}}</a></td>
</tr>

Answer 1

您应该使用以下内容

<ul>
     <li *ngFor="let user of userList ;" (click)="getID(user.id)">
       {{user.firstName}}
    </li>
   </ul>
</ul>
<br>
    <span *ngIf="clickedID">   Clicked ID {{clickedID}}</span>
       `

打字稿方法

 getID(id:number){
    this.clickedID=id;

  }

<强> LIVE DEMO

Answer 2

用户对象：

export class User{
id: string;
firstName: string;
LastName: string;
status: string;
userName: string;
}

in componentsnet ts：

userList: User[];

contructor()
{
this.userList = [];
}

goToAccount(id: any)
{
console.log(id);
}

HTML：

<tr *ngFor="let user of userList">
    <td>{{ user.firstName }} {{ user.lastName }}</td>
    <td>{{ user.status}}</td>
    <td><a (click)="goToAccount(user.id)">{{user.userName}}</a></td>
</tr>

这是我能想到的最近的简单解决方案。

在Angular 2中获取所选ID

2 个答案: