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

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(). 任何建议非常感谢。

日期时间.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

日期时间.component.html：

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

Answer 1

这是一个plunker，展示了您在 Angular 环境中的工作情况。这不是完成您正在尝试做的事情的好方法。

相反，您应该做一些类似我制作的更好的 plunker 的事情，它实际上充分利用了 Angular。

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

myDate: Date;

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

使用 HTML

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