入力時のAngular2バインディングが機能していないようです

Question

ドロップダウンから選択した値に基づいてインデックスを変更するコンポーネントを作成しています。ドロップダウン自体は、ネイティブ要素ではなくスタイル化されたものであるため、隠された入力フィールドを更新します。そのフィールドはテンプレート内にあり、コンポーネント内の変数とのバインディングを持ちます。入力の値が正常に変わりますが、私は、[更新]ボタンをクリックした場合、レベルはまだ「1」として出力し

import { Component, ElementRef, Input, OnInit } from '@angular/core'; 
import { Spell } from '../../models/spell'; 

/** 
* This class represents a Spell component 
*/ 
@Component({ 
    moduleId: module.id, 
    selector: 'ui-spell', 
    templateUrl: 'spell.component.html', 
    styleUrls: ['spell.component.css'] 
}) 
export class SpellComponent implements OnInit { 
    @Input() spell: Spell; 

    level: number; 

    constructor(private el: ElementRef) { 
    this.level = 1; 
    } 

    ngOnInit() { 
    } 

    update() { 
    console.log(this.level); 
    } 
} 

---

<div class="ui dropdown button"> 
    <input name="level" type="hidden" [(ngModel)]="level"> 
    <div class="text">Rank 1</div> 
    <i class="dropdown icon"></i> 
    <div class="menu"> 
    <div class="item" data-value="1">Rank 1</div> 
    <div class="item" data-value="2">Rank 2</div> 
    <div class="item" data-value="3">Rank 3</div> 
    <div class="item" data-value="4">Rank 4</div> 
    <div class="item" data-value="5">Rank 5</div> 
    </div> 
</div> 
<button (click)="update()">Update</button> 

：ここ

は、コンポーネントやテンプレートです。コンポーネントの開始値を変更して入力を検査すると、値が一致するように変更されました。値がコンポーネントに返されない理由を説明するためにどこにでもエラーはありません。私は次にどこを見るか分かりません。

Answer 1

私はあなたが何にもドロップダウンを結合していないので、私は」

<div class="item" (click)="level = 1" data-value="1">Rank 1</div> 
<div class="item" (click)="level = 2" data-value="2">Rank 2</div> 
<div class="item" (click)="level = 3" data-value="3">Rank 3</div> 
<div class="item" (click)="level = 4" data-value="4">Rank 4</div> 
<div class="item" (click)="level = 5" data-value="5">Rank 5</div> 

Answer 2

私が知る限りAngularのオブジェクトにしかバインドできません。プロパティとしてlevelを持つオブジェクトを作成し、それが動作するはずです。ここでバニラJS構文：data.levelへ

var data = {level: 1}; 
//... 

update() { 
    console.log(this.level); 
} 

バインド：

<input name="level" type="hidden" [(ngModel)]="data.level">