Question

我的app.component.ts和superheroes.ts中的模板无法加载，我遇到了问题。（我正在做一个类似于Angular Tour of Heroes教程的测试项目，但是有一个Django后端。）标题（即＃34;你在英雄大厅＆＃34;）将会显示，所以显然我的app.components.ts文件正在被阅读，但是＃34;欢迎！＆＃34;没有加载，也没有超级英雄列表。（编辑：我在运行时也没有在控制台中出现任何错误。所有内容似乎都在正确编译。）

app.component.ts

import { Component } from '@angular/core';
import { HeroComponent } from './components/hero/superheroes'
import { HeroService } from './services/heroService'

@Component({
  selector: 'app-root',
  template: `<div>
           <h1>Welcome!</h1>
           <superheroes></superheroes>
         </div>`,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "You are in the Hall of Heroes";
}

superheroes.ts

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../../services/heroService'

@Component({
  selector: 'superheroes',
  template: `
    <ul><li *ngFor="let hero of heroes">{{hero.name}}</li></ul>
  `
})
export class HeroComponent implements OnInit {
  heroes: any[];
  error: any;

  constructor(private heroService: HeroService) { }

  getHeroes() {
    this.heroService
      .getHeroes()
      .then(heroes => this.heroes = heroes)
      .catch(error => this.error = error);
  }

  ngOnInit() {
    this.getHeroes();
  }
}

heroService.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class HeroService {
  private apiURL = 'http://localhost:8000/superheroes/?format=json';

  constructor(private http: Http) { }

  getHeroes() {
    return this.http.get(this.apiURL)
      .toPromise()
      .then(response => response.json())
      .catch(this.handleError);
  }

  private handleError(error: any) {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

app.module.ts

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

import { HeroComponent } from './components/hero/superheroes';
import { HeroService } from './services/heroService';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我真的为此感到头疼，但我无法摆脱我错过了一些非常明显的感觉。如果你需要我添加任何额外的代码/解释我所拥有的，只需这样说，我就会编辑我的帖子，但我认为这很好。

Answer 1

问题是您在template上定义了templateUrl和AppComponent。因此，angular选择将HTML文件设置为templateUrl作为组件模板。

设置template或templateUrl，我建议使用templateUrl：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "You are in the Hall of Heroes";
}

将模板字符串移动到app.component.html：

<div>
  <h1>Welcome!</h1>
  <superheroes></superheroes>
</div>

angular2 - 模板没有出现

1 个答案: