Question

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

以下是组件和模板：

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>

输入的值成功更改，但如果我点击“更新”按钮，该级别仍会输出为＆＃39; 1＆＃39;。如果我更改组件中的起始值并检查输入，则值已更改为匹配。在任何地方都没有错误来解释为什么值没有返回到组件。我不知道下一步该去哪儿。

Answer 1

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

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

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

绑定到data.level：

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

Answer 2

我会使用像

这样的东西

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

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

2 个答案: