Question

仅显示正在加载...但不显示其他内容。任何人都可以提供解决方案。

的index.html

    <!DOCTYPE html>
<html>
  <head>
    <title>Flight Details</title>
    <script>document.write('<base href="' + document.location + '" />');
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet"
          href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <!--<link rel="stylesheet" href="forms.css">-->

    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

app.component.ts

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

    @Component({
      selector: 'my-app',
      template: '<flight-form></flight-form>'
    })
    export class AppComponent { }

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';
import { FlightFormComponent } from './hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    FlightFormComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

英雄外形component.html

  <div class="container">
    <h1> Enter the flight details </h1>
    <form #heroForm="ngForm">
    <div>
       <label for="flight_number"> Flight number: </label>
       <input type="textbox" id="flight_number" class="form-control" required
       [(ng-model)]="model.flight_num" name="flight_num" >
       TODO: remove this: {{model.flight_num}}
     </div>
     <br><br>

     <div class="form-group">
       <label for="origin"> Origin: </label>
       <select class="form-control" id="origin" required>
       <option *ngFor="let ori of origins" [value]="ori">{{ori}}</option>
       </select>
     </div>   
     <br><br>

     <div class="form-group">
       <label for="dest"> Destination: </label>
       <select class="form-control" id="dest" required>
       <option *ngFor="let des of dests" [value]="des">{{des}}</option>
       </select>
     </div>
     <br><br>

     <div class="form-group">
        <label for="ssr"> Add SSR: </label>  
        <input type= "textbox" class="form-control" id="ssr"
        [(ng-model)]="model.ssr" name="ssr">
        TODO: remove this: {{model.ssr}}
     </div>
     <br><br>

     <div>
       <button type="Submit" class="btn btn-success"> Submit </button>
     </div>

  </form>
  </div>

hero.form.component.ts

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

import { Flight }    from './hero';

@Component({
  selector: 'flight-form',
  templateUrl: './hero-form.component.html'
})
export class FlightFormComponent {

   origins = ['ATL' , 'MSP', 'JFK'];

   dests = ['ATL', 'MSP', 'BOM', 'HKG'];

   model = new Flight(0025, this.origins[0], this.dests[0], 'yes');

   submitted = false;

   onSubmit(){
     this.submitted = true;
   }
   // TODO: Remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }
}

hero.ts

export class Flight {

  constructor(
    public flight_num: number,
    public origin: string,
    public dest: string,
    public ssr?: string
  ) {  }

}

angular2 app仅显示<my-app>标签的内容，不显示链接组件的内容

0 个答案: