Question

我几天来一直在与这个问题作斗争，我似乎无法让代码正常工作。所以我是网络技术的新手，我正试图模仿this tutorial phase。但是没有仪表板和hero-detail.component。

我唯一需要的是列表/表格会填充来自mock-results.ts的值，这些值应该来自result.service.ts。解决方案可能很简单，但我无法理解其中的原因。似乎index.html在某种程度上没有收到结果，所以它可以填充值。由于整个项目有很多文件，因此可能更容易为您提供plunker链接：http://plnkr.co/edit/coGOltjZqScCZsERHF4Y?p=preview。

result.service.ts：

import { Result } from './result'
import { RESULTS } from './mock-results';
import { Injectable } from '@angular/core';

@Injectable()
export class ResultService {
    get() {
        return Promise.resolve(RESULTS);
    }
}

results.component.ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';

import { Result } from './result';
import { ResultService } from './result.service';
import { ResultDetailComponent } from './result-detail.component'

@Component({
  selector: 'my-results',
  templateUrl: 'app/results.component.html'
})
export class ResultsComponent implements OnInit {
  results: Result[];

  constructor(
    private router: Router,
    private resultService: ResultService) { }

  get() {
    this.results = this.resultService.get();
  }

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

的index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@2.0.0" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Results</title>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="styles.css" rel="stylesheet" />
    <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

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

</html>

results.component.html

<h2>My results</h2>
  <div>
    <table class="table table-bordered table-striped">
      <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Ssn</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="Result in results">
        <td>{{Result.id}}</td>
        <td>{{Result.name}}</td>
        <td>{{Result.ssn}}</td>
      </tr>
      </tbody>
    </table>
  </div>

app.component.ts

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

import { ResultsComponent } from './results.component';
import { ResultDetailComponent } from './result-detail.component';
import { ResultService } from './result.service';

@Component({
    selector: 'my-app',
    template: `
      <h1>{{title}}</h1>
      <nav>
        <a [routerLink]="['Results']">Results</a>
      </nav>
      <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS, ResultService]
})
@RouteConfig([
  {
    path: '/results',
    name: 'Results',
    component: ResultsComponent,
    useAsDefault: true
  }
])

export class AppComponent {
  title = 'Results'
}

提前致谢！

Answer 1

问题是您在SystemJS配置中配置了app文件夹，但您的文件位于src个文件夹中。

您应该将文件移到app个文件中。

仅供参考，您在JavaScript控制台中遇到以下错误：

（404 Not Found）loading http://run.plnkr.co/d0RghXGUcm5fTzNU/app/main.ts（...）

在你的plunkr中，你只有一个src/main.ts档......

请参阅此plunkr：http://plnkr.co/edit/eNbj6mhWQi7uUIXCN663?p=preview。

Angular2没有填充index.html

1 个答案: