Javascript 角2接口_Javascript_Html_Angular_Typescript

Javascript 角2接口

javascript html angular typescript

Javascript 角2接口,javascript,html,angular,typescript,Javascript,Html,Angular,Typescript,我正在尝试使用Angular 2中的接口。我已经创建了一个接口和一个组件接口： export interface Items { id: number; title: string; message: string; done: boolean; } 组成部分： export class AddComponent implements OnInit { currentItem: string; todos: any; constru

我正在尝试使用Angular 2中的接口。我已经创建了一个接口和一个组件

接口：

export interface Items {
    id: number;
    title: string;
    message: string;
    done: boolean;
}

组成部分：

export class AddComponent implements OnInit {
    currentItem: string;
    todos: any;

    constructor(private router: Router) {
        this.currentItem = (localStorage.getItem('currentItem')!==null) ? JSON.parse(localStorage.getItem('currentItem')) : [  ];
        this.todos = this.currentItem;
    }

    addTodo(item: Items) {
        this.todos.push({
            id: item.id,
            title: item.title,
            message: item.message,
            done: false
        });

        item.title = '';
        item.message = '';
        localStorage.setItem('currentItem', JSON.stringify(this.todos));
        console.log('retorno: ' + this.todos.title + ' titulo: ' + item.title);

        this.router.navigate(['./list']);
    }

   ngOnInit() {}

}

HTML:


身份证件：
提图洛：
策略：
萨尔瓦多

我有一个错误：

异常：无法读取未定义的属性“id”

有人知道怎么解决吗？

这里可能有一些问题

错误可能是由于调用

addTodo

函数时没有参数或参数

未定义

。这就是你所描述的错误的原因

另一个可能的问题可能是没有实现接口的类。虽然严格来说这不是必需的，但它可以帮助您使代码更好地利用TypeScript的类型安全性，从而帮助您防止错误

更新：在代码更新中，您确实在没有参数的情况下调用了

addTodo

，这会导致函数中未定义该参数

有几种方法可以解决这个问题，但我将向您展示一种。在组件中，您可以添加属性

id

，

title

，

message

（请注意，最好将它们放置在对象中或重命名以保持清晰；这只是一个简单的示例）。然后可以使用这些属性添加todo。因此，您不必使用

item.id

、

item.title

和

item.message

而是使用

this.id

、

this.title

和

this.message

。这些字段与您提供的HTML模板中的

ngModel

绑定所引用的字段相匹配。