Angular2 - 在进行下拉值选择时将动态加载的参数传递给函数答案

【问题标题】：Angular2 - pass dynamically loaded parameters to function while doing dropdown value selectionAngular2 - 在进行下拉值选择时将动态加载的参数传递给函数
【发布时间】：2017-07-14 04:20:10
【问题描述】：

请检查一下，我是否以正确的格式传递了 updateId 方法的 li 标签 click 函数的参数？控制台中的错误仅显示该行....

我的 app.component.html 代码是

<div class='form-group' style="width: 100%;">
    <div class="btn-group" style="width: 100%;">
        <button type="button" class="btn btn-default" style="width : 75%;text-align: left;">{{name}}</button>
        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
        <ul class="dropdown-menu" style="width: 75%;">
             <li *ngFor="let result of jsonList" ><a class="dropdown-item" (click)="updateId('{{result.id}}', '{{result.name}}')" >{{result.name}}</a>
            </li>
        </ul>
    </div>
</div>

我的 app.component.ts 是，

import { HomeService } from '../../services/home.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home-component',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  id: string;
  name : string;
  jsonList : any;

  constructor(private homeservice: HomeService) { }

  ngOnInit() {
    this.id = null;
    this.name = "SELECT";
    this.jsonList= [{"Id" : "F1", "name" : "FONE"}, {"id" : "F2", "name" : "FTWO"}]
  }



  updateId(id : string, name : string) : void {
        this.id = id;
        this.name = name;
  }

}

它不工作。错误在于 li 标签 click 函数方法从 jsonList 传递动态参数。所以请帮我解决。

【问题讨论】：

错误是什么？这是一个错字吗：this .name？
告诉我们您遇到的错误、您预计会发生什么以及您会得到什么，从而帮助我们帮助您。你不能只是发布代码说它不起作用并希望最好。您需要提供信息，以便人们知道去哪里寻找。
@nbo.... 更改并编辑了问题.....现在请检查一下。
请谨慎选择标签。 AngularJS 与 Angular2 没有任何关系，它们是完全不同的框架。
Passing multiple argument to ng-click method的可能重复

标签： javascript html twitter-bootstrap angular

【解决方案1】：

不要在诸如(click) 属性之类的事件绑定中使用把手{{ }} - 它们将根据组件实例自动进行评估。并且也不需要单引号。像这样使用它：

<li *ngFor="let result of jsonList">
    <a (click)="updateId(result.id, result.name)">{{result.name}}</a>
</li>

【讨论】：

【解决方案2】：

在为事件处理程序（ng-click）指定参数时，您不需要 {{ }}。正确的语法是

<li *ngFor="let result of jsonList">
    <a (click)="updateId(result.id, result.name)">{{result.name}}</a>
</li>

【讨论】：