Angular2-在執行下拉值選擇時將動態加載的參數傳遞給函數

Question

請檢查是否以正確的格式傳遞了updateId方法的li標簽點擊函數的參數？ 控制台中的錯誤僅顯示該行。

我的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標記單擊函數方法從jsonList傳遞動態參數。 因此，請幫助我獲得解決方案。

Answer 1

不要在事件綁定（例如， (click)屬性(click)使用把手{{ }} -它們將自動針對Component實例進行評估。 並且也不需要單引號。 像這樣使用它：

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

Answer 2

在為事件處理程序（ng-click）指定參數時，不需要{{}}。 正確的語法是

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