Angular2綁定輸入似乎沒有工作

我創建一個組件，根據從下拉列表中選擇的值更改索引。下拉本身是一個程式化的而非本地元素，因此更新了隱藏的輸入字段。該字段位於模板中，並與組件中的變量綁定。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); 
    } 
}

<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」。如果我更改組件中的起始值並檢查輸入，則值已更改爲匹配。沒有任何錯誤可以解釋爲什麼該值不會返回到組件。我不知道下一步該往哪裏看。

來源

2017-04-18 Acaeris

你沒有約束力下拉到任何東西，所以我米不知道你爲什麼期望水平輸入實際更新到其他任何東西。 –

爲了讓'ngModel'接受這個改變，你需要確保''change type'事件是從''觸發的''ngModel'來接受改變。 '@Input（）'在這裏是多餘的，因爲它只有在你從外部傳遞數據到'SpellComponent'時纔有意義 - 比如'' –

我知道有人會被@ Input（）拼寫...它不在模板的下拉部分中使用，它是我傳入的一個對象，下拉列表將選擇一個索引（模板中缺少1行「{{spell .mana [level]}}「作爲此刻的測試）。關於大衛的評論，我不明白你的意思。輸入字段綁定到「級別」。 – Acaeris

我會使用類似

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

來源

2017-04-18 16:17:42

我可能不得不這樣做，但我擔心它會停止現有的點擊事件。 – Acaeris

只要你不從'（click）=「...」'返回'false'，它不應該影響其他點擊處理程序。 –

謝謝。這工作。考慮到我不需要保持選擇的狀態，我過於複雜。 – Acaeris

就我所知，您只能綁定到Angular中的對象。創建一個level作爲屬性的對象，它應該工作。香草JS語法在這裏：

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

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

綁定到data.level：

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

來源

2017-04-18 16:16:24

我認爲你可以，否則它不會像現在這樣將level值傳遞給輸入，它只是不會以任何方式發送任何更新。 – Acaeris

我記得一個來自Angular 1.x項目的行爲，但可能已經過時了。變量是通過值傳遞的，通過JS中的引用對象，可以解釋單向綁定而不是雙向綁定。 –

Angular2綁定輸入似乎沒有工作

回答

相關問題