2017-02-23 24 views
0

をしている間のことを確認してください機能するように動的にロードされたパラメータを渡し、の私は李のパラメータを渡していますタグクリック機能は、正しい形式で方法を更新IDかどうか?コンソールにエラーのみ、その行を示して....Angular2 - ドロップダウン値選択

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

} 

ですワーキング。エラーは、タグをクリックjsonListからの動的パラメータを渡す関数メソッドをクリックします。だからpls私は解決を得るのに役立ちます。

+0

です。エラーは何ですか。これはタイプミスです: 'this .name'ですか? – nbo

+0

お困りのことをお聞かせください。お手数ですが、お手数ですがお手数ですが、どうぞお気軽にお問い合わせください。あなたは単にそれがうまくいかず、最高のために願ってコードを投稿することはできません。あなたは人々がどこを見るかを知るために情報を提供する必要があります。 – GillesC

+0

@nbo ....それを変更して質問を編集しました.....今すぐチェックしてください。 –

答えて

1

(click)のようなイベントバインディングでハンドルバー{{ }}を使用しないでください。コンポーネントインスタンスに対して自動的に評価されます。一重引用符も必要ありません。このように使用してください:

1

イベントハンドラ(ng-click)に引数を指定する際に{{}}は必要ありません。正しい構文は

<li *ngFor="let result of jsonList"> 
    <a (click)="updateId(result.id, result.name)">{{result.name}}</a> 
</li> 
関連する問題