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> 

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

有谁知道如何解决呢？

Answer 1

这里可能会出现一些问题。

错误可能是由于您调用addTodo函数而没有参数或参数为undefined的事实造成的。这就是导致你所描述的错误的原因。

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

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

有几种方法可以解决这个问题，但我会告诉你一个。在您的组件中，您可以添加属性id,title,message（请注意，将它们放置在对象中或重命名以保持清晰可能会更好;这只是一个简单示例）。然后你可以使用这些属性来添加你的待办事项。因此，您可以不使用item.id,item.title和item.message而使用this.id,this.title和this.message。这些匹配的字段与您提供的HTML模板中的ngModel绑定相关。