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

Question

我正在尝试制作一种创建新播放器的方法。但是当我在输入中写一些东西并提交我的应用程序时，什么都不做(只是刷新页面(。

这是我的代码：

服务.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));
}
}

组件.ts

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

组件.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以更具 Angular 的方式。

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