角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

ここで間違っていることがあります。

エラーは、undefinedという引数または引数なしでaddTodo関数を呼び出していることが原因である可能性があります。それがあなたが記述しているエラーの原因です。

もう1つの考えられる問題は、インターフェイスを実装するクラスがない可能性があります。これは厳密には必要ではありませんが、コードをTypeScriptの型安全性をより有効に活用し、エラーを防ぐのに役立ちます。

更新：コード更新では、パラメータなしでaddTodoを実際に呼び出しています。そのため、関数内で定義されていません。

これを解決するにはいくつかの方法がありますが、1つを示します。コンポーネントには、id、title、messageの各プロパティを追加できます（オブジェクトに配置するか名前を変更して名前を明確にする方がよい場合があります）。これらのプロパティを使用してToDoを追加することができます。したがって、item.id、item.title、およびitem.messageの代わりにthis.id,this.title、およびthis.messageを使用します。これらは、入力したHTMLテンプレートのngModelバインディングを参照しているフィールドと一致します。