0
我一直在對付這個問題幾天了，我似乎無法讓代碼工作。所以我對網絡技術很陌生，並且試圖模仿this tutorial phase。儘管沒有儀表板和hero-detail.component。Angular2沒有填充index.html
我唯一需要的就是list/table將會填充來自應該通過result.service.ts的mock-results.ts中的值。解決方案可能很簡單，但我無法理解這個原因。似乎index.html在某種程度上根本不會收到結果，因此它可以填充值。由於整個項目有很多文件，所以只需給你一個鏈接即可：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="[email protected]" 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/[email protected]?main=browser"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]/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'
}
提前感謝！
你提供的Plunker不工作。 （檢查控制檯） – rinukkusu
http://plnkr.co/edit/ctIGLvwOfZ8WgseH03iZ?p=preview – yurzui