使用字符串插值将控件从FormGroup绑定到* ngFor内的模板

Question

我想要做的是在输入文本标记中添加带有字符串插值的[formControl]属性。让我告诉你代码。

附加team.component.ts

constructor(fb:FormBuilder) { 
 this.addTeamForm = fb.group({
  'textTeamName':[null,Validators.required],
  'player1':[null,Validators.required],
  'player2':[null,Validators.required],
  'player3':[null,Validators.required],
  'player4':[null,Validators.required],
  'player5':[null,Validators.required],
  'optionWicketKeeper':false      
});

附加team.component.html

 <label>Fill Player Names</label>
  <div class = 'row form-group' *ngFor = 'let player of players; let i = index;'>
      <input type='text' [(ngModel)] = 'player.name' [formControl] = 'addTeamForm.controls["player{{i+1}}"]' class ='form-control col' placeholder="{{p}} {{player.index}}">
</div>

我需要在[formControl]属性的值中使用字符串插值运算符，以便它将读取控件（player1，player2，player3，player4，player5），因为我还使用了* ngFor（用于循环显示）。但我得到错误：

Error:
Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 29 in [addTeamForm.controls["player {{i}}"]] in ng:///AppModule/AddTeamComponent.html@9:57 ("= 'let player of players; let i = index;'>

有没有其他方法可以在* ngFor中使用插值（{{}}）在[formControl]属性中使用？

Answer 1

你可以用另一种方式告诉角度。使用以下代码：

<label>Fill Player Names</label>
  <div class = 'row form-group' *ngFor = 'let player of players; let i = index;'>
      <input type='text' [(ngModel)] = 'player.name' formControlName = "player{{i+1}}" class ='form-control col' placeholder="{{p}} {{player.index}}">
</div>

希望它会有所帮助。如果不工作，请告诉我。