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

Question

当我在 angular-cli 1.0.1 中创建项目的产品时，出现以下错误：

ERROR in ng:///root/Desktop/KRA(Angular4)/client/src/app/grade/grade.component.html (13,16): Property 'primary' does not exist on type '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']);
    }
    }

}

Answer 1

您似乎在 CLI 中使用 AOT，它试图用组件属性验证 bindings 以获得编译时错误。

基本上你没有在组件上定义 primary 属性。绑定应该是使用带有 [] 的属性（属性绑定）

dividerColor="primary"

或（将主包装在'（单引号）中）

[dividerColor]="'primary'"

Answer 2

您应该根据属性在您的组件中定义主变量。如果它是一些颜色值，那么你应该声明为 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']);
    }
    }

}

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

Property 'primary' does not exist on type 'GradeComponent'

typescript

angular-material

angular-cli

angular2-aot

angular