输入上的Angular2绑定似乎不起作用

我正在创建一个组件，它根据从下拉列表中选择的值更改索引。下拉列表本身是样式化的，而不是本机元素，因此会更新隐藏的输入字段。该字段位于模板中，并与组件中的变量绑定

以下是组件和模板：

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);
  }
}

---

输入值已成功更改，但如果单击“更新”按钮，则级别仍输出为“1”。如果我更改组件中的起始值并检查输入，则该值已更改为匹配。没有任何错误可以解释为什么该值没有返回到组件。我不知道下一步该看哪里。

据我所知，您只能以角度绑定对象。创建一个级别为属性的对象，它应该可以工作。这里的语法：

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

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

绑定到data.level：

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

我会用像这样的东西

<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>

---

您没有将下拉列表绑定到任何内容，因此我不确定您为什么希望级别输入实际更新到其他内容。要使ngModel接受更改，您需要确保从For ngModel触发更改事件以接受更改@输入在这里是多余的，因为它只在您从外部将数据传递给SpellComponent时才相关-就像我知道有人会被@Input拼写搞糊涂一样。。。它没有在模板的下拉部分中使用，它是我传递的一个对象，下拉列表将从模板中缺少的1行中选择一个索引，目前只是{{spell.mana[level]}作为测试。至于大卫的评论，我不明白你的意思。输入字段绑定到级别。我认为您可以，否则它不会像当前那样将级别值传递给输入，它只是不会以另一种方式发送任何更新。我记得Angular 1.x项目的行为，但这可能已经过时。变量在JS中按值传递，按引用传递对象，这可以解释单向绑定而不是双向绑定。我可能不得不这样做，但我担心它会停止现有的单击事件。只要你不从click=。。。它不应该影响其他点击处理程序。谢谢。这很有效。考虑到我不需要保持选择的状态，我把事情复杂化了。

<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>