2016-03-19 12 views
1

Die Minute, die ich {{text}} nach einem beliebigen Text in einem <div> -Element platziert habe, verschwindet dieses Element aus dem Browser. Wenn ich {{text}} von "ist ausgefüllt" lösche, wird der Text "ausgefüllt" angezeigt.Schablonentext verschwindet beim Versuch der String-Interpolation

Ist ausgefüllt {{isFilled? 'Ja': 'Nein'}}

Nicht sicher, was ich falsch mache.

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

    } 

Hier ist die 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

Ich verstehe Ihr Problem nicht wirklich. Kannst du ein PLNKR machen? Sie können [diese PLNKR] (http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5) verwenden, um zu starten. –

+0

Ich bekomme dies in Chrome Entwickler AUSNAHME: Kein Wert Accessor für '' in [mich. Name in InputComponent @ 4: 33] –

Antwort

2

Ich bin nicht sicher, was passiert ist. Aber ich tippte alles wieder und es funktioniert. Ich nehme an, irgendwo ist etwas schief gelaufen, das ich einfach nicht verstehen konnte. Die Wiederherstellung des gesamten Codes funktionierte.

Verwandte Themen