从表中读取数据并在angular 6中提交时创建json数据

时间:2018-08-23 16:03:08

标签: html json angular angular6

我对角度6很陌生,需要以下帮助 我已经在angular6中创建了一个动态html表,该表是根据以下参数创建的:

  1. 标题名称将基于玩此游戏的玩家的姓名
  2. 创建的总行数取决于打法游戏的方式。 以下是表格的屏幕截图: enter image description here

因此,基本上,用户将从下拉列表中选择回合数,并且当他/她单击生成表时,将相应地生成表。 我有以下用于html和组件的代码:

<table class="table table-bordered">
<thead>
  <tr>
    <th>Round</th>
    <th *ngFor="let player of players">{{player}}</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let round of rounds;let i= index">
    <td>Round {{i+1}}</td>
    <td *ngFor="let player of players"><input type="text"/></td>
  </tr>
  <tr>
    <td><strong>Total</strong></td>
    <td *ngFor="let player of players">Total</td>
  </tr>
<tr><td><button (click)="getSum()" value="Show Score">Show Score</button></td></tr>
</tbody>

组件:

   export class PlayComponent implements OnInit {
  public show:boolean = false;
  players;
  rounds;
  constructor(private myService : ServicesService) {

  }

  ngOnInit() {
    this.players=this.myService.getPlayerName();//['Player1','Player2','Player3','Player4','Player5'];
  }
  generateTable(args){
    if(args) {
      this.show = true;
      this.rounds = Array(parseInt(args)).fill(args);
    }
  }
  getSum(ev) {
    console.log(ev);
  }
}

我希望在显示分数按钮上单击以添加所有玩家的分数。因此,基本上应该补偿在每列中输入的分数,并且将显示为“总计”。我尝试使用ngModel,但是在这种情况下所有输入字段都与在任何输入字段中输入的那个绑定。能帮我实现这个吗?

0 个答案:

没有答案