Angular2服务方法从输入中添加新项目

Question

我正在尝试创建一个新玩家的方法。但是当我写入输入内容并提交我的应用程序时，什么都不做（只是刷新页面）。

这里是我的代码：

service.ts

import { Injectable } from '@angular/core'; 
import { Player } from './player'; 
import { WhitePlayers } from './mock-players'; 

@Injectable() 
export class PlayersService { 
    WhitePlayers: Player[]; 
    name; 
    constructor() { } 
    getPlayers(): Promise<Player[]> { 
     return Promise.resolve(WhitePlayers); 
    } 

    createPlayer(): void { 
    this.WhitePlayers.push(new Player(this.name)); 
    } 

} 

component.ts

addPlayer(): void { 
     this.playersServices.createPlayer(); 
    } 

component.html

<form (submit)="addPlayer()" novalidate> 
    <md-input-container> 
     <input mdInput [(ngModel)]="name" placeholder="Add player" name="addNewPlayer"> 
    </md-input-container> 
     <button type="submit">Add</button> 
</form> 

非常感谢你的答案:)

Answer 1

如果页面已刷新，则该字段中的值将再次初始化。

您可以将按钮类型更改为button以避免这种情况。

<button type="button">Add</button> 

---

您也应该检查形式的文档。您可以将表单绑定到模型，并使用 ngSubmit在此过程中采用更加角度的方式。

https://angular.io/guide/forms#submit-the-form-with-ngsubmit