如何检测选择/单击了哪个属性答案

【问题标题】：How to detect which property is selected/clicked如何检测选择/单击了哪个属性
【发布时间】：2018-06-22 09:39:32
【问题描述】：

我正在尝试检测从 ngFor 中选择/单击了哪个属性，该属性来自 REST API。

我想获取从其他属性中选择的属性（broker.username）

<div class="list-group">
    <ul *ngFor="let broker of brokers">
        <li class="broker_list"> <a href="#" class="list-group-item list-group-item-action" style="text-align: center;">{{broker.username}}</a></li>
    </ul>

</div>

这是 REST 调用

[
    { id: 1, username: "PersonA"},
    { id: 2, username: "PersonB"}
]

【问题讨论】：

选中是什么意思？用户点击了哪个？
是的，点击了其他项目中的哪一项

标签： javascript angular rest angular6

【解决方案1】：

您必须像这样在anchor tag 上使用事件处理程序：

<div class="list-group">
    <ul *ngFor="let broker of brokers">
        <li class="broker_list">
            <a (click)="onSelect(broker)" href="#" class="list-group-item list-group-item-action" style="text-align: center;"> {{ broker.username }}</a>
        </li> 
    </ul>

</div>

在你的组件添加方法中：

@Component({ })
class XYZ {
    // ... some code

    public onSelect(broker) {
        // Do what you need with broker?
    }
}

【讨论】：

【解决方案2】：

直接在方法中传递broker，像这样

<div class="list-group">
     <ul *ngFor="let broker of brokers">
          <li class="broker_list"> <a href="#" (click)="setBroker(broker)" class="list-group-item list-group-item-action" style="text-align: center;">{{broker.username}}</a></li> 
     </ul>
</div>

【讨论】：

【解决方案3】：

有几种方法，其中之一就是这样做。

1) 在a 标签上添加点击处理程序：

<div class="list-group">
          <ul *ngFor="let broker of brokers">
              <li class="broker_list"> <a href="#" (click)="selected(broker.username)" class="list-group-item list-group-item-action" style="text-align: center;">{{broker.username}}</a></li> 
            </ul>

  </div>

2) 给组件添加方法：

selected(brokerName: string) {
  console.log(brokerName);
}

【讨论】：

【解决方案4】：

您可以添加一个调用函数的（单击）属性，该函数将代理作为参数。然后，您可以访问该代理的用户名。

<a href="#" (click)="handleBrokerClicked(broker)" class="list-group-item list-group-item-action" style="text-align: center;">{{broker.username}}</a>

a 标签应该能够知道当前代理是什么，因为它在 *ngFor 内部。

【讨论】：