角2界面

Question

我正在尝试使用角度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：

<div class="container">
    <form (submit)="addTodo()">

        <div class="form-group">
            <label>Id:</label>
            <input [(ngModel)]="id" class="textfield form-control" name="id">
        </div>

        <div class="form-group">
            <label>Titulo:</label>
            <input [(ngModel)]="title" class="textfield form-control" name="title">
        </div>

        <div class="form-group">
            <label>Mensagem:</label>
            <input [(ngModel)]="message" class="textfield form-control" name="message">
        </div>

        <button type="submit" class="btn btn-success">Salvar</button>
    </form>
</div>

我有一个错误：EXCEPTION: Cannot read property 'id' of undefined

有人知道怎么解决吗？

Answer 1

这里可能出了一些问题。

错误可能是由于您在调用addTodo函数时没有参数或参数(即undefined )造成的。这就是你所描述的错误的原因。

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

update ：在您的代码更新中，您实际上调用了没有参数的addTodo，这会导致函数中未定义它。

有几种方法可以解决这个问题，但我会给你看一个。在组件中，您可以添加属性id、title、message (请注意，最好将它们放置在对象中或重命名它们以保持清晰；这只是一个很小的例子)。然后，可以使用这些属性添加待办事项。因此，与其使用item.id、item.title和item.message，不如使用this.id、this.title和this.message。它们与您所提供的HTML模板中的ngModel绑定匹配所引用的字段。