Angular 2 fügen Sie einen neuen Eintrag von der Eingabe hinzu

Question

Ich bin neu zu Angular2 und ich versuche, ein neues Element der Liste von Eingabe hinzuzufügen. Aber klicken Sie dann, um mich anstelle von Text [Objekt Objekt] zu senden.

Hier ist mein Code:

app.component.html

<form (submit)="addItem(item)"> 
    <md-input-container> 
     <input [(ngModel)]="name" mdInput placeholder="add" name="addNew"> 
    </md-input-container> 
     <button type="submit" md-icon-button> 
      <i class="material-icons">send</i> 
    </button> 
    </form> 

app.component.ts

items = Players; 
name; 

addItem(name): void { 
     this.items.push(new Player({ 
      name : name 
     })); 
    } 

player.ts

export class Player { 
    id: number; 
    name: string; 
    count: number; 

    constructor(name){ 
     this.id; 
     this.name = name; 
     this.count = 0; 
    } 

all-Spieler .ts

export let Players: Player[] = [ 
]; 

Vielen Dank für die Antworten

Answer 1

ich eine vollständige Antwort schreiben.

In Ihrer Komponente (TS-Datei):

items = Players; 
name; 

addItem() { this.items.push(new Player({ name : this.name })); } 

In Ihrem HTML:

<form (submit)="addItem()" novalidate> 
    <md-input-container> 
     <input [(ngModel)]="name" mdInput placeholder="add" name="addNew"> 
    </md-input-container> 
    <button type="submit" md-icon-button> 
     <i class="material-icons">send</i> 
    </button> 
</form> 

Meine Vermutung auf, dass ist, dass Sie das Formular 2 mal vor.