javascript - 使用字符串插值将 FormGroup 中的控件绑定(bind)到 *ngFor 内的模板

Question

我想做的是在输入文本标记中添加带有字符串插值的 [formControl] 属性。 让我向您展示代码。

add-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      
});

add-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

你可以用其他方式告诉 Angular 。使用以下代码:

<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>

希望能有所帮助。如果不起作用，请告诉我。