'GradeComponent'类型中不存在属性'primary'

时间:2017-04-28 07:38:50

标签: angular typescript angular-material angular-cli angular2-aot

当我在angular-cli 1.0.1中创建项目作品时,出现以下错误:

  

错误   NG:///根/桌面/ KRA(Angular4)/client/src/app/grade/grade.component.html   (13,16):'GradeComponent'类型中不存在属性'primary'。

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']);
    }
    }

}

2 个答案:

答案 0 :(得分:1)

似乎你在CLI中使用AOT,它尝试使用component属性验证 List<String[]> nameL = Arrays.asList(sa1, sa2, sa3); Collections.sort(nameL, (o1, o2) -> { if (o1[0].equals(o2[0])) { if (o1[1].equals(o2[1])) { return o1[2].compareTo(o2[2]); } else { return o1[1].compareTo(o2[1]); } } else { return Integer.compare(Integer.parseInt(o1[0]), Integer.parseInt(o2[0])); } }); for (String[] strings : nameL) { System.out.println(Arrays.toString(strings)); } 以在编译时获得错误。

基本上你没有在组件上定义bindings属性。绑定应该是使用primary属性(属性绑定)

[]

OR (在dividerColor="primary" 中包裹主要内容(单个qoute))

'

答案 1 :(得分:0)

您必须根据其属性在组件中定义主变量。如果它是某种颜色值,那么您应该声明为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']);
    }
    }

}