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