尝试字符串插值时模板文本消失

Question

当我将 {{ text }} 放在 <div> 元素内的任何文本之后时，该元素就会从浏览器中消失。如果我从 "is filled out" 中删除 {{text}}，则会显示文本 "is filled out"。

是否填写{{isFilled ? 'Yes' : 'No'}}

不确定我做错了什么。

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

我不确定发生了什么。但是我再次输入了所有内容并且它有效。我假设某处出了差错，我无法捕捉到。重新输入所有代码有效。

Answer 2

同样的事情发生在我身上。万一有人遇到同样的问题，我个人只需要擦除/重新输入 模板本身 而不是组件逻辑或它在整个应用程序中实例化的任何地方。在你开始吹嘘你的应用程序之前记住这一点哈哈。

尝试字符串插值时模板文本消失

Template text disappears when trying string interpolation

angular2-template

angular