角度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> <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> 。 <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>

之后，至少對我而言。

編輯。 在瀏覽器中檢查開發工具，它會告訴您錯誤在哪里！

Answer 2

您錯過了在課堂上定義函數的機會。 在類中定義geolocate方法。 它應該解決您的問題

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

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