2016-03-19 7 views
1

<div> öğesindeki herhangi bir metinden sonra {{text}} koyduğum dakika, bu öğe tarayıcıdan kayboluyor. Eğer {{text}} 'i "dolduruyor" u kaldırırsam, "doldurulur" mesajı görüntülenir.Dize enterpolasyonunu denerken şablon metni kayboluyor

Doldurulmuş {{isFilled? 'Evet': 'Hayır'}}

Ne yaptığımdan emin değilim.

import {Component} from "angular2/core"; 

@Component({ 
    selector: 'my-input', 
    template: ` 
    <h2>Your details please</h2> 
    <div> 
    <label for="name">Your Name:</label> 
    <Input type="text" id="name" [(ngModel)]="myself.name" (keyup)="onKeyup()"> 
    </div> 
    <div> 
    <label for="age">Your Age:</label> 
    <Input type="text" id="age" [(ngModel)]="myself.age" (keyup)="onKeyup()"> 
    </div> 
    <br> 
    <div>Is Filled out {{isFilled ? 'Yes' : 'No'}}</div> 
    <div>Is Valid </div> 
    <br> 
    <button [disabled]="!isValid">Submit</button> 

    ` 
}) 

export class InputComponent { 
    myself = {name: '', age: ''}; 
    isFilled = false; 
    isValid = false; 

    onKeyup() { 
    if (this.myself.name != '' && this.myself.age != '') { 
     this.isFilled = true; 
    } 
    else { 
     this.isFilled = false; 
    } 
    if (this.myself.name != '' && /^\d+$/.test(this.myself.age)) { 
     this.isValid = true; 
    } 
    else { 
     this.isValid = false; 
    } 
    } 

    } 

İşte ne olduğundan emin değilim CSS

body { 
    padding: 32px; 
    margin: 32px; 
    font-family: "Roboto", Arial, sans-serif; 
    font-size: 16px; 
} 

.container { 
    padding: 16px; 
    border: 1px solid #ccc; 
    background: #eee; 
    margin-bottom: 32px; 
} 

button { 
    padding: 4px 8px; 
    border: 1px solid #ccc; 
    background-color: white; 
    border-radius: 3px; 
    cursor: default; 

} 

button:not([disabled]) { 
    cursor: pointer; 
} 

button:not([disabled]): hover { 
    background-color: salmon; 
    color: white; 
} 

.highlight { 
    font-weight: bold; 
} 
+0

Sorununuzu gerçekten anlamıyorum. Bir plnkr yapabilir misin? Başlamak için [bu plnkr] 'yu (http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5) kullanabilirsiniz. –

+0

Bunu chrome geliştiricisinde alıyorum EXCEPTION: ['ben için InputComponent @ 4: 33'de'. –

cevap

2

olduğunu. Ama ben her şeyi tekrar yazdım ve işe yarıyor. Birşeyler yakalayamadığım bir yere gittim. Çalışılan tüm kodları yeniden yazarak.