0
我遇到了很多问题，因为不工作我尝试了所有的建议如下，但没有什么似乎工作我。* ng2For不工作，没有错误信息记录在控制台
- 进口{} CommonModule在我的 “app.component.ts”
- 也试过在我的 “app.module.ts” 在导入
- 检查我的数组是这样myArray的= []不是myArray：[];
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { Ng2DragDropModule } from 'ng2-drag-drop';
import {DndModule} from 'ng2-dnd';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { AppConfig } from './app.config';
import { AlertComponent } from './_directives/index';
import { AuthGuard } from './_guards/index';
import { AlertService, AuthenticationService, UserService, SchemaService } from './_services/index';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { UploadComponent } from './upload/index';
import { ReadComponent } from './read/index';
import { DragComponent } from './drag/index';
@NgModule({
imports: [
BrowserModule,
DndModule.forRoot(),
FormsModule,
HttpModule,
routing,
Ng2DragDropModule
],
declarations: [
AppComponent,
AlertComponent,
HomeComponent,
LoginComponent,
RegisterComponent,
FileSelectDirective,
UploadComponent,
ReadComponent,
DragComponent
],
providers: [
AppConfig,
AuthGuard,
AlertService,
AuthenticationService,
UserService,
SchemaService
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
import { CommonModule } from '@angular/common';
@Component({
moduleId: module.id,
selector: 'app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent { }
home.component.ts
import { Component, OnInit } from '@angular/core';
import { User } from '../_models/index';
import { UserService } from '../_services/index';
@Component({
moduleId: module.id,
template: `<h1>{{welcome}}</h1>
<table class="table">
<tr>
<th>#</th>
<th>Game</th>
<th>Platform</th>
<th>Release</th>
</tr>
<tr *ngFor="let game of games; let i = index">
<td>{{i + 1}}</td>
<td>{{game.game}}</td>
<td>{{game.platform}}</td>
<td>{{game.release}}</td>
</tr>
</table>`
})
export class HomeComponent implements OnInit {
welcome : string;
games : [{
game: string,
platform : string,
release : string
}];
currentUser: User;
users: User[] = [];
constructor(private userService: UserService) {
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
this.welcome = "Display List using ngFor in Angular 2"
this.games = [{
game : "Deus Ex: Mankind Divided",
platform: " Xbox One, PS4, PC",
release : "August 23"
},
{
game : "Hue",
platform: " Xbox One, PS4, Vita, PC",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "Deus Ex: Mankind Divided",
platform: " Xbox One, PS4, PC",
release : "August 23"
},
{
game : "Hue",
platform: " Xbox One, PS4, Vita, PC",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "Deus Ex: Mankind Divided",
platform: " Xbox One, PS4, PC",
release : "August 23"
},
{
game : "Hue",
platform: " Xbox One, PS4, Vita, PC",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "Deus Ex: Mankind Divided",
platform: " Xbox One, PS4, PC",
release : "August 23"
},
{
game : "Hue",
platform: " Xbox One, PS4, Vita, PC",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "Deus Ex: Mankind Divided",
platform: " Xbox One, PS4, PC",
release : "August 23"
},
{
game : "Hue",
platform: " Xbox One, PS4, Vita, PC",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
},
{
game : "The Huntsman: Winter's Curse",
platform: "PS4",
release : "August 23"
}]
}
ngOnInit() {
this.loadAllUsers();
}
deleteUser(_id: string) {
this.userService.delete(_id).subscribe(() => { this.loadAllUsers() });
}
private loadAllUsers() {
this.userService.getAll().subscribe(users => { this.users = users; });
}
}
输出：
游戏平台发布
元素： 
控制台窗口截图 
所以你的欢迎信息也没有显示？你的组件没有选择器。你在哪里/如何加载这个组件？ – echonax
@echonax ..我登录到应用程序后，此组件在路由上加载..这里的问题是表头显示正确，你可以看到在输出，但tbody的内容不是 –
我没有看到任何表头中的图片和'h1'元素内容 – echonax