角2：複数のhtmlコード行（テンプレート）がブラウザでレンダリングされない

Question

app.component.htmlファイルにテンプレートとしてHTMLコードのブロックがあります。このコードはブラウザでのレンダリングを拒否しました。しかし、そのファイルの内容全体を短い行で置き換えると、ブラウザにその行が表示されます。短いコード行では、
<h1>Hello there</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>のようなものです。以下は

私のコードです：app.component.html

<div class="locator"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <header class="inner-page-header landing-page-header"> 
      <span>Welcome to</span> 
      <h1 class="start">Food</h1> 
      <p>Daily new menus of breakfast, lunch, evening snacks and dinner; prepared by expert chefs.</p> 
      <p> 
      </p> 
     </header> 
     <div class="holder landing-page-form"> 
      <form accept-charset="UTF-8" action="/localities/set_locality" 
       class="location-form col-xs-12 col-sm-6 col-sm-offset-3" data-remote="true" id="zip_form" 
       method="get"> 
      <div style="display:none"> 
       <input name="utf8" type="hidden" value="✓"> 
      </div> 
      <p>SELECT LOCATION </p> 
      <hr class="small-line"> 
      <div id="locationField"> 
       <input class="form-control" id="autocomplete" placeholder="Enter your address" 
        onFocus="geolocate()" type="text"></input> 
      </div> 
      <div class=" text-center"> 
       <button id="singlebutton" name="findfood" class="btn btn-lg btn-space btn-primary">Find food</button> 
      </div> 
      </form> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

app.component.ts：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { 

} 

index.html：

...... 
    <div class="page-content"> 

    <app-root>Loading...</app-root> 

    </div> 
....... 

私は出力として見るすべてがある：Loading

私は何が欠けていますか？

Answer 1

<input class="form-control" id="autocomplete" placeholder="Enter your address" 
       onFocus="geolocate()" type="text"></input> <!-- error here --> 

あなたの問題を解決することは、少なくとも私にとっては、レンダリングした後</input>

を削除する必要があります。

EDIT。ブラウザのdevツールをチェックすると、エラーがどこにあるかがわかります！

Answer 2

あなたはクラスで関数を定義していませんでした。クラス内にgeolocateメソッドを定義します。それは

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { 
    geolocate() { 
    } 
}