当我在Angular-CLI 1.0.1中创建项目的生产时，我得到了以下错误：
错误 ng：///root/desktop/kra(angular4(/client/src/app/grade/grade/grade.component.html (13,16(：类型为" gradeComponent"的属性"主要"。
html代码文件：
<md-card>
<md-card-title>{{isNew?'Add':'Edit'}} Grade</md-card-title><hr>
<md-card-content>
<form [formGroup]="frmGrade">
<div>
<md-input-container class="half" [dividerColor]="(frmGrade.controls['grade'].hasError('required') && frmGrade.controls['grade'].touched)?'warn':'primary'">
<input mdInput
placeholder="Grade Name"
formControlName="grade"
maxlength="30"
required
/>
</md-input-container>
</div>
<div>
<md-input-container class="half" [dividerColor]="primary">
<input mdInput placeholder="Grade Description (Optional)"
formControlName="description"
maxlength="100"
/>
</md-input-container>
</div>
</form>
</md-card-content>
<md-card-actions>
<button type="submit"
md-raised-button color="primary"
*ngIf='isNew' (click)="onAdd();false"
[disabled]='!frmGrade.valid'>
Add
</button>
<button type="submit"
md-raised-button
color="primary"
*ngIf='!isNew' (click)="onUpdate();false"
[disabled]='!frmGrade.valid'>Update
</button>
<button md-raised-button
color="warn"
[routerLink]='["/grade-listing"]'>
Cancel
</button>
</md-card-actions>
</md-card>
打字稿文件：
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Grade } from './grade';
import { FormGroup, FormBuilder , Validators } from '@angular/forms';
import {GradeService} from '../services/grade.service';
import {CoreService} from '../services/core.service';
@Component({
selector: 'kra-grade',
templateUrl: './grade.component.html'
})
export class GradeComponent implements OnInit {
public isNew:boolean=true;
public frmGrade: FormGroup;
public subscription:any;
public oldGrade:Grade;
constructor(
private formBuilder:FormBuilder ,
private gradeService:GradeService,
private router:Router,
private activatedRoute:ActivatedRoute,
private core :CoreService
) { }
ngOnInit() {
this.frmGrade = this.formBuilder.group({
grade: ['', Validators.required],
description: ''
});
if (typeof this.activatedRoute.snapshot.params['id'] != 'undefined') {
this.setForUpdate();
}
}
private setForUpdate() {
this.isNew = false;
this.gradeService
.getOneGrade(this.activatedRoute.snapshot.params['id'])
.subscribe(
data => {
this.oldGrade = data,
this.frmGrade = this.formBuilder.group({
grade: [this.oldGrade.grade, Validators.required],
description: this.oldGrade.description
});
},
err => this.core.notify(this.core.ERROR_TITLE,this.core.SOMETHING_WRONG,0)
);
}
onAdd(){
if(this.frmGrade.dirty && this.frmGrade.valid){
this.gradeService
.addGrade(this.frmGrade.value)
.subscribe(
d => {
if(d.error) this.core.notify(this.core.WARN_TITLE,d.message,0);
else {
this.core.notify(this.core.SUCCESS_TITLE,this.core.SUCCESSFULLY_ADDED,1);
this.frmGrade.reset();
this.router.navigate(['/grade-listing']);
}
},
error => this.core.notify(this.core.ERROR_TITLE,this.core.SOMETHING_WRONG,0)
);
}
}
onUpdate(){
if(this.frmGrade.dirty && this.frmGrade.valid){
this.gradeService
.editGrade(this.oldGrade,this.frmGrade.value,this.activatedRoute.snapshot.params['id'])
.subscribe(
d => {
if (d.error) this.core.notify(this.core.WARN_TITLE, d.message, 0);
else {
this.core.notify(this.core.SUCCESS_TITLE, this.core.SUCCESSFULLY_CHANGE, 1);
this.frmGrade.reset();
this.router.navigate(['/grade-listing']);
}
},
error => this.core.notify(this.core.ERROR_TITLE, this.core.SOMETHING_WRONG, 0),
);
}else if(!this.frmGrade.dirty){
this.router.navigate(['/grade-listing']);
}
}
}
看来您在CLI中使用了AOT，这是试图用组件属性验证bindings以获取编译时间的错误。
基本上，您没有在组件上定义primary属性。绑定应与[](属性绑定(
dividerColor="primary"
或('中的Primer(单Qoute((
[dividerColor]="'primary'"
您必须根据其属性定义组件中的主要变量。如果是某种颜色值，则应将其声明为primary:string='red';。
打字稿文件：
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Grade } from './grade';
import { FormGroup, FormBuilder , Validators } from '@angular/forms';
import {GradeService} from '../services/grade.service';
import {CoreService} from '../services/core.service';
@Component({
selector: 'kra-grade',
templateUrl: './grade.component.html'
})
export class GradeComponent implements OnInit {
public isNew:boolean=true;
public frmGrade: FormGroup;
public subscription:any;
public oldGrade:Grade;
public primary:string = 'red'; // dont know whether it is string or any other type
constructor(
private formBuilder:FormBuilder ,
private gradeService:GradeService,
private router:Router,
private activatedRoute:ActivatedRoute,
private core :CoreService
) { }
ngOnInit() {
this.frmGrade = this.formBuilder.group({
grade: ['', Validators.required],
description: ''
});
if (typeof this.activatedRoute.snapshot.params['id'] != 'undefined') {
this.setForUpdate();
}
}
private setForUpdate() {
this.isNew = false;
this.gradeService
.getOneGrade(this.activatedRoute.snapshot.params['id'])
.subscribe(
data => {
this.oldGrade = data,
this.frmGrade = this.formBuilder.group({
grade: [this.oldGrade.grade, Validators.required],
description: this.oldGrade.description
});
},
err => this.core.notify(this.core.ERROR_TITLE,this.core.SOMETHING_WRONG,0)
);
}
onAdd(){
if(this.frmGrade.dirty && this.frmGrade.valid){
this.gradeService
.addGrade(this.frmGrade.value)
.subscribe(
d => {
if(d.error) this.core.notify(this.core.WARN_TITLE,d.message,0);
else {
this.core.notify(this.core.SUCCESS_TITLE,this.core.SUCCESSFULLY_ADDED,1);
this.frmGrade.reset();
this.router.navigate(['/grade-listing']);
}
},
error => this.core.notify(this.core.ERROR_TITLE,this.core.SOMETHING_WRONG,0)
);
}
}
onUpdate(){
if(this.frmGrade.dirty && this.frmGrade.valid){
this.gradeService
.editGrade(this.oldGrade,this.frmGrade.value,this.activatedRoute.snapshot.params['id'])
.subscribe(
d => {
if (d.error) this.core.notify(this.core.WARN_TITLE, d.message, 0);
else {
this.core.notify(this.core.SUCCESS_TITLE, this.core.SUCCESSFULLY_CHANGE, 1);
this.frmGrade.reset();
this.router.navigate(['/grade-listing']);
}
},
error => this.core.notify(this.core.ERROR_TITLE, this.core.SOMETHING_WRONG, 0),
);
}else if(!this.frmGrade.dirty){
this.router.navigate(['/grade-listing']);
}
}
}