javascript - Angular 2 接口(interface)

Question

我正在尝试使用 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:

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

我遇到错误:异常:无法读取未定义的属性“id”

有谁知道怎么解决吗？

Answer 1

这里可能出现一些问题。

该错误可能是由于您调用 addTodo 函数时不带参数或参数未定义而导致的。这就是导致您所描述的错误的原因。

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

更新:在代码更新中，您确实调用了不带参数的addTodo，这导致它在函数中未定义。

有几种方法可以解决这个问题，但我将向您展示一种。在您的组件中，您可以添加属性 id、title、message (请注意，最好将它们放在对象中或重命名他们是为了让事情变得清晰；这只是一个最小的例子)。然后，您可以使用这些属性来添加您的待办事项。因此，您可以使用 this.id，而不是使用 item.id、item.title 和 item.message >、this.title 和 this.message。这些字段与您在提供的 HTML 模板中使用 ngModel 绑定(bind)引用的字段相匹配。