Question

上周我开始学习Angular 4和TypeScript，我遇到了第一个障碍。

我正在尝试制作一个简单的日期和时间组件。从Javascript视图我看不出任何错误，但我认为我没有像Angular想要的那样使用范围，所以我正在寻找一些指导。错误是： Failed to compile very/long/file/path/date-time.component.ts (35,18): Property 'date' does not exist on type 'DateTimeComponent'.

我怀疑我没有把我的方法放在正确的位置，或者我需要在setTime()之外声明我的属性。任何建议都非常感激。

日期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

日期time.component.html：

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

Answer 1

这里有一个plunker显示你在Angular环境中工作的东西。这不是完成您尝试做的事情的好方法。

相反，你应该做一些像better plunker that I made那样实际上充分利用Angular的东西。

我的代码版本缩短了99％，并实现了目标。

myDate: Date;

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

使用HTML

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

Answer 2

您的组件上没有df1 email account 0 555@i555.com 555 1 666@666.com 666 2 777@666.com Nan 3 888@666.com 999 df2 (i think ip is index here) ip account 1.1.1.1 555 2.2.2.2 666 . . df3= pd.merge(df1,df2,on='accountname')变量declared的原因。

date

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显示文件范围声明，这是您在应用中最常使用的。 snippet 1显示基于Snippet 2的声明，只有文件可用，才能访问该方法，该变量不存在。

method

如果您将private贴在private或variable前面，method文件（本身）只能访问.ts文件，HTML有权访问。

Answer 3

请注意，您正在设置date尝试使用date.whatever而不是this.date.whatever

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'date-time',
  templateUrl: './date-time.component.html',
  styleUrls: ['./date-time.component.css']
})
export class DateTimeComponent implements OnInit {

  constructor() { 

  }

  ngOnInit() {

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

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

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

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

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

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

  }

} //end of class

应该有效

Angular 4“类型组件上不存在属性”

3 个答案: