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

【问题标题】：Angular2 binding on input doesn't seem to be working输入上的 Angular2 绑定似乎不起作用
【发布时间】：2017-04-19 00:17:42
【问题描述】：

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

这是组件和模板：

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>

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

【问题讨论】：

你没有将下拉菜单绑定到任何东西，所以我不确定你为什么期望关卡输入实际上更新到其他任何东西。
要让ngModel 接受更改，您需要确保从<input type="hidden"> 触发change 事件，以便ngModel 接受更改。 @Input() 在这里是多余的，因为它仅在您从外部将数据传递给 SpellComponent 时才相关 - 例如 <ui-spell [spell]="1">
我知道有人会被 @Input() 拼写弄糊涂...它没有在模板的下拉部分中使用，它是我传入的一个对象，下拉列表将选择一个索引（模板中缺少 1 行，目前只是 "{{ spell.mana[level] }}" 作为测试）。关于大卫的评论，我不明白你的意思。输入字段绑定到“级别”。

标签： angular typescript

【解决方案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>

【讨论】：

我可能不得不这样做，但我担心它会停止现有的点击事件。
只要您不从(click)="..." 返回false，它就不会影响其他点击处理程序。
谢谢。这行得通。考虑到我不需要保持选择的状态，我把事情复杂化了。

【解决方案2】：

据我所知，您只能绑定到 Angular 中的对象。创建一个以level 为属性的对象，它应该可以工作。 Vanilla JS 语法在这里：

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

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

绑定到data.level：

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

【讨论】：

我认为你可以，否则它不会像当前那样将级别值传递给输入，它只是不会以另一种方式发回任何更新。
我记得 Angular 1.x 项目中的这种行为，但可能已经过时了。 JS中变量是值传递，对象是引用传递，这可以解释单向绑定而不是双向绑定。