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