typescript - Angular 4 "Egenskap finns inte på typ komponent"

Den senaste veckan har jag börjat lära mig Angular 4 och TypeScript, och jag har stött på mitt första hinder.

Jag försöker skapa en enkel datum- och tidskomponent. Från ett Javascript-perspektiv kan jag inte se något fel, men jag tror att jag inte arbetar med scope på det sätt som Angular vill, så jag söker lite vägledning. Felet är: Failed to compile very/long/file/path/date-time.component.ts (35,18): Property 'date' does not exist on type 'DateTimeComponent'.

Jag misstänker att jag inte placerar mina metoder på rätt ställe, eller att jag behöver deklarera mina egenskaper utanför setTime(). Allt råd uppskattas.

date-time.component.ts:

export class DateTimeComponent implements OnInit {

  constructor() { 

  }

  ngOnInit() {
    this.setTime();
  }

  checkTime(i) {
    return (i < 10) ? "0" + i : i;
  }

  setTime() {

    let month = ["January", "February", 
    "March", "April", 
    "May", "June", 
    "July", "August", 
    "September", "October", 
    "November", "December"];

    //date
    let date: Date = new Date(); // this only accessible within setTime() method
    let d: any = date.getDate();
    let m: any = date.getMonth();
    let y: any = date.getFullYear();
    //time
    let h: any = date.getHours();
    let min: any = date.getMinutes();
    let s: any = date.getSeconds();

    let newMin: any = this.checkTime(this.min);
    let newS: any = this.checkTime(this.s);

    let myDate: any = d + " " + month[this.m] + " " + y;
    let myTime: any = h + ":" + newMin + ":" + newS; 

    let t: any = setTimeout(() => {
      startTime()
    }, 500);

  }

} //end of class

date-time.component.html:

<div ng-controller='TimeCtrl'>
  <p>{{ myDate }}</p>
  <p>{{ myTime }}</p>
</div>

Svar #1

Här är en plunker som visar din sak fungerande i en Angular-miljö. Detta är inte ett bra sätt att uppnå det du försöker göra.

Istället bör du göra något som denna bättre plunker som jag gjorde som faktiskt använder Angular till sin fulla potential.

Min version av din kod är ungefär 99% kortare och uppnår målet.

myDate: Date;

ngOnInit() {
  this.myDate = new Date();
}

Med HTML

<p>{{ myDate | date:'d MMMM y'}}</p>
<p>{{ myDate | date:'hh:mm:ss'}}</p>

Svar #2

Anledningen till att du inte har deklarerat variabeln date i din komponent.

export class DateTimeComponent implements OnInit {

  constructor() { 

  }
  
  private date: Date; // This is accessible to this entire file
  private month: string[];
  private d: any;
  private m: any;
  private y: any;
  private h: any;
  private min: any;
  private s: any;
  private newMin: any;
  private newS: any;
  private myDate: any;
  private myTime: any;
  private t: any;
  
  ngOnInit() {

  }
  
  checkTime(i) {
      return (i < 10) ? "0" + i : i;
    }

    setTime() {
      this.month = ["January", "February", 
      "March", "April", 
      "May", "June", 
      "July", "August", 
      "September", "October", 
      "November", "December"];

      //date
      this.date = new Date();
      this.d = this.date.getDate();
      this.m = this.date.getMonth();
      this.y = this.date.getFullYear();
      //time
      this.h = this.date.getHours();
      this.min = this.date.getMinutes();
      this.s = this.date.getSeconds();

      this.newMin = this.checkTime(this.min);
      this.newS = this.checkTime(this.s);

      this.myDate = this.d + " " + this.month[this.m] + " " + this.y;
      this.myTime = this.h + ":" + this.newMin + ":" + this.newS; 

      this.t = setTimeout(() => {
        startTime()
      }, 500);
    }


} //end of class

export class DateTimeComponent implements OnInit {

  constructor() { 

  }
 
  ngOnInit() {
  }
  
  checkTime(i) {
      return (i < 10) ? "0" + i : i;
    }

    setTime() {
     let month = ["January", "February", 
      "March", "April", 
      "May", "June", 
      "July", "August", 
      "September", "October", 
      "November", "December"];

      //date
      let date: Date = new Date(); // this only accessible within setTime() method
      let d: any = date.getDate();
      let m: any = date.getMonth();
      let y: any = date.getFullYear();
      //time
      let h: any = date.getHours();
      let min: any = date.getMinutes();
      let s: any = date.getSeconds();

      let newMin: any = this.checkTime(this.min);
      let newS: any = this.checkTime(this.s);

      let myDate: any = d + " " + month[this.m] + " " + y;
      let myTime: any = h + ":" + newMin + ":" + newS; 

      let t: any = setTimeout(() => {
        startTime()
      }, 500);
    }

} //end of class

Det finns två tillvägagångssätt för detta, snippet 1 visar filövergripande deklaration, detta är vad du mestadels skulle använda i din app. Snippet 2 visar metod-baserad deklaration och den är endast tillgänglig för den metoden, vad gäller filer så existerar inte den variabeln.

private

Om du sätter private framför en variable eller method, kommer den endast att vara tillgänglig för .ts-filen (själv), inte ens HTML har tillgång till den.

Relaterade artiklar