文字列補間を試したときにテンプレートテキストが消える

Question

<div>要素内のテキストの後に{{text}}を置くと、その要素はブラウザから消えます。 {{text}}を "記入済み"から削除すると、 "記入済み"のテキストが表示されます。

{is is filled？ 「はい」：「いいえ」}

私が間違っていることがわかりません。

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

    } 

は、ここで私は何が起こったのかわからない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; 
} 

Answer 1

です。しかし、私はすべてをもう一度タイプし、それは動作します。私はちょうど私が捕まえることができなかった何かがうんざりになったと思う。すべてのコードを再入力しました。