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;
}
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. –
Ich bekomme dies in Chrome Entwickler AUSNAHME: Kein Wert Accessor für '' in [mich. Name in InputComponent @ 4: 33] –