Angular 2 Interface

Question

Ich versuche mit Schnittstellen in Angular 2 zu arbeiten. Ich habe eine Schnittstelle und eine Komponente erstellt.

Schnittstelle:

export interface Items { 
    id: number; 
    title: string; 
    message: string; 
    done: boolean; 
} 

Komponente:

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> 

Ich habe einen Fehler: EXCEPTION: Cannot read property 'id' of undefined

Wer weiß, wie es zu lösen?

Answer 1

Hier können ein paar Dinge schiefgehen. Der Fehler wird wahrscheinlich dadurch verursacht, dass Sie die addTodo-Funktion ohne ein Argument oder ein Argument aufrufen, das undefined ist. Das verursacht den Fehler, den Sie beschreiben.

Ein anderes mögliches Problem kann sein, dass Sie keine Klasse haben, die die Schnittstelle implementiert. Obwohl dies nicht unbedingt erforderlich ist, kann es Ihnen helfen, die Code-Sicherheit von TypeScript besser zu nutzen und Fehler zu vermeiden.

Aktualisieren: In Ihrem Code-Update rufen Sie tatsächlich addTodo ohne einen Parameter, was dazu führt, dass es in Ihrer Funktion nicht definiert ist.

Es gibt ein paar Möglichkeiten, wie Sie das lösen können, aber ich zeige Ihnen eins. In Ihrer Komponente können Sie die Eigenschaften id, title, message hinzufügen (beachten Sie, dass es möglicherweise besser ist, sie in ein Objekt zu platzieren oder sie umzubenennen, um die Dinge klar zu halten; dies ist nur ein minimales Beispiel). Sie können dann diese Eigenschaften verwenden, um Ihre Aufgaben hinzuzufügen. Anstatt also item.id, item.title und item.message zu verwenden, würden Sie this.id, this.title und this.message verwenden. Diese entsprechen den Feldern, auf die Sie verweisen, mit Ihrer ngModel Bindung in der von Ihnen bereitgestellten HTML-Vorlage.