각도 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 : EXCEPTION: Cannot read property 'id' of undefined이

사람이 그것을 해결하는 방법을 알고 있나요 :

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

I 오류가 있나요?

Answer 1

여기에 몇 가지 문제가있을 수 있습니다.

undefined 인수 또는 인수없이 addTodo 함수를 호출하고 있다는 오류가 원인 일 수 있습니다. 그게 당신이 설명하는 오류의 원인입니다.

다른 가능한 문제는 인터페이스를 구현하는 클래스가없는 것일 수 있습니다. 이것이 꼭 필요한 것은 아니지만 코드를 TypeScript의 유형 안전성을보다 잘 활용하여 오류를 예방하는 데 도움이 될 수 있습니다.

업데이트 : 코드 업데이트시 매개 변수없이 실제로 addTodo을 호출하면 함수에서 정의되지 않습니다.

몇 가지 방법으로 문제를 해결할 수 있지만 그 중 하나만 보여 드리겠습니다. 구성 요소에 id, title, message 속성을 추가 할 수 있습니다 (개체에 배치하거나 이름을 변경하여 이름을 분명하게 유지하는 것이 더 좋을 수 있음). 그런 다음이 속성을 사용하여 할 일을 추가 할 수 있습니다. 따라서 item.id, item.title 및 item.message을 사용하는 대신 this.id, this.title 및 this.message을 사용하십시오. 이는 제공된 HTML 템플리트에서 ngModel Y 인딩을 참조하고있는 필드와 일치합니다.