使用角度快速入门应用(https://github.com/angular/quickstart/blob/master/README.md)。使用角度2.1.1
使用* ngFor,列表中的第一项不会出现在页面上。我在我的控制台中没有出现任何错误,但在teacher.component.ts
中看到ngOnInit的以下控制台日志输出:
Erty
Dave
Sarah
Walter
undefined
最后一个“未定义”意味着数组的第一个元素正在重新定义,但我不知道为什么。
这是输出的屏幕截图 - 代码发布在下面。
请注意,重复块中缺少第一个教师,但json数组中没有。
代码:
teacher.component.ts:
import { Component, Input } from "@angular/core";
@Component({
selector: 'teacher',
template: `
<p>Teacher {{index}}: {{teacherName}}</p>
`
})
export class TeacherComponent {
@Input() teacherName: string;
@Input() index: number;
ngOnInit() {
console.log(this.teacherName);
}
}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TeacherComponent } from './teacher.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [TeacherComponent, AppComponent ],
bootstrap: [ AppComponent, TeacherComponent ]
})
export class AppModule { }
app.component.ts:
import { Component } from '@angular/core';
import { TeacherComponent } from "./teacher.component";
@Component({
selector: 'my-app',
template: `<h1>CodeCraft Learning Angular!</h1>
<pre>{{teachers | json}}</pre>
<teacher *ngFor="let t of teachers; let i = index" [teacherName]="t" [index]="i"></teacher>
`
})
export class AppComponent {
public teachers: string[] = [
"Erty",
"Dave",
"Sarah",
"Walter"
];
}
感谢您的帮助!
答案 0 :(得分:4)
问题在于你是app.module中的Bootstrapping TeacherComponent,它被视为一个入口组件,它为我们的目的进行了第一次渲染中断。
此更改将使其正确呈现:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TeacherComponent } from './teacher.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [TeacherComponent, AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
这里有关于引导https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-bootstrap_vs_entry_component
的一些内容答案 1 :(得分:0)
我没有看到任何问题,我在此Plunker!中尝试了这一点并且确实有效。
create table t (val sql_variant);
insert into t (val) values (123);
insert into t (val) values (4.5);
insert into t (val) values ('Hello');
insert into t (val) values (N'שלום');
insert into t (val) values (GETDATE());
insert into t (val) values (CURRENT_TIMESTAMP);
insert into t (val) values (newid());
select t.val
,sql_variant_property(t.val, 'BaseType')
,sql_variant_property(t.val, 'Precision')
,sql_variant_property(t.val, 'Scale')
,sql_variant_property(t.val, 'TotalBytes')
,sql_variant_property(t.val, 'Collation')
,sql_variant_property(t.val, 'MaxLength')
from t
;