TypeScript kann div nicht finden

Question

Probieren Sie eine Angular-Demo aus und haben Sie diesen Fehler über [ts] div.

import { Component } from "@angular/core"; 
import { FormControl } from "@angular/forms"; 

@Component({ 
selector: "main", 
template: ' 
    <div> 
     <label for="first-name-input">First Name:</label> 
     <input type="text" [formControl]="firstNameInput" 
    </div>', 
}) 
export class AppComponent { 

public firstNameInput: FormControl = new FormControl(""); 
public lastNameInput: FormControl = new FormControl(""); 

public message: string = "Hello World!"; 

}

Mit Core2.0 und neuem Angular Download bereit. Was bedeutet das oben genannte?

Dies ist der tslint.json

{ 
"extends": "tslint:latest", 
"rules": { 
    "arrow-parens": true, 
    "interface-name": [ true, "never-prefix" ], 
    "curly": true, 
    "no-var-requires": false, 
    "no-string-literal": false, 
    "no-console": [ false ], 
    "object-literal-sort-keys": false, 
    "ordered-imports": [ false ] 
}, 
"jsRules": { 
    "curly": true 
}, 
"rulesDirectory": [] 

}

Erste Erfahrungen mit Typoskript und eckig.

Answer 1

Dies liegt daran, dass Sie einfache Anführungszeichen um Ihre mehrzeilige Vorlagenzeichenfolge verwenden. In einfachen Anführungszeichen kann es nicht mehrere Zeilen umfassen. Es sieht die Zeile und denkt, dass Sie auf eine Variable namens div verweisen.

Anstelle der einfachen Anführungszeichen können Sie `Zeichen (Grave oder Back-Tick) verwenden, die eine Vorlagenzeichenfolge definieren, die sich über mehrere Zeilen erstrecken kann. Denken Sie daran, dass es auch Ausdrücke analysiert, die wie $ {...} eingeschlossen sind, also könnten Sie etwas wie $ {text} haben, wenn Text eine Variable im Bereich ist, oder sogar etwas komplizierteres wie $ {text.toUpperCase() + anderer Text}.

Answer 2

Dies ist ein einfacher Syntaxfehler. Die Vorlage sollte ein mehrzeiliges String-Literal sein, das von Backticks (`) anstelle von einfachen Anführungszeichen eingeschlossen wird.