Question

****更新代码*****
嘿大家刚刚接触到角4，我试图制作一个简单的组件来显示从这个object获取数据的月份和日期

这是我的data.model.ts文件

export class Dater {

    date = new Date();
    month: number = this.date.getMonth(); 
    day: number = this.date.getDate();

    constructor() {
    }

}

我得到以下错误
Cannot find name 'date' Did you mean instance member 'this.date'?

然后我的date.component.ts文件

import { Component, OnInit } from '@angular/core';
import { Dater } from './dater.model'; // here i reference my date class
@Component({
  selector: 'app-date',
  templateUrl: './date.component.html',
  styleUrls: ['./date.component.css']
})
export class DateComponent implements OnInit {

  date: Dater; // assign property to type Date class
  constructor() { 
  }
  ngOnInit() {
  }

}

和我的观看文件date.component.html

<p>
  date works!
  {{date.month}}
</p>

我还想补充一点，我对OOP的理解并不是那么好，YET :)感谢所有的帮助！

更新我的代码后，我现在收到以下错误
Cannot read property 'month' of undefined

Answer 1

有两个错误，您不应该将 keyword 作为班级名称，并且当您使用打字稿分配时使用 this ，

以下内容应该有效，

export class myClass {
    date = new Date();
    month: number = this.date.getMonth();
    day: number = this.date.getDate();
    constructor() {
    }

}

Answer 2

在组件的内部范围内，我们使用this来引用属性或函数，即类上下文。

export class Dater {

   date: Date = new Date();
   month: number = this.date.getMonth(); 
   day: number = this.date.getDate();

   constructor() {

   }

}`

在模板中，表达式上下文通常是组件实例（对象上下文），在本例中是DateComponent对象上下文。

我们错过了声明实例，所以它将是未定义的。

import { Component, OnInit } from '@angular/core';
import { Dater } from './dater.model'; // here i reference my date class
@Component({
  selector: 'app-date',
  templateUrl: './date.component.html',
  styleUrls: ['./date.component.css']
})
export class DateComponent implements OnInit {

  date: Dater = new Dater();
  constructor() { 
  }
  ngOnInit() {
  }

}

您可以参考此Angular 2文档，以便更好地了解Angular 2上下文https://angular.io/docs/ts/latest/guide/template-syntax.html

Answer 3

这纯粹是一个Typescript类实例化问题，其中模型中的Dater类未在DateComponent.ts中实例化您可以在https://www.typescriptlang.org/docs/handbook/classes.html

中了解有关Typescript类的更多信息

date = new Dater();

这样就可以了解

BEGINNER Angular4组件故障排除

3 个答案: