将文本输入绑定到可观察对象中的属性-Angular 2+

问题是您必须知道什么需要和期望什么。我想您想制作一个不仅带有“ Id”，“ betslipTeamName”和“ stake”（至少需要Id和股份）的表单数组。使用带有数组的ReactiveForm很容易。通常，我们有一个返回数据的服务。我举了一个完整的例子，希望对您有帮助

//simple service that read a json (you have one yet -it's only to complete my example-)
@Injectable()
export class AppDataService {

  constructor(private httpClient:HttpClient) { }
  read(key:any)
  {
    return this.httpClient.get('../assets/data.json')
  }
}

我们的组件有一个.html这样的

<div *ngIf="yet">
<!--I put a *ngIf to avoid an error at first-->
  <form [formGroup]="dataForm" (ngSubmit)="submit(dataForm)" novalidate>
    <!--see that the "formArrayName" is "lista" 
    don't confuse with the *ngFor of "lista" (the lista in ngFor is a getter)
    -->
    <div formArrayName="lista" *ngFor="let lista of lista.controls;let i=index">
      <div [formGroupName]="i"> <!--it's necesary a formGroupName=i-->
      <!--we can use labels here -->
      {{labels[i].Id}}{{labels[i].Text}}
          <!--the input we need , some can be readOnly -->

          <input type="text" class="form-control" formControlName="Id">
          <input type="text" class="form-control" formControlName="betslipTeamName">
          <input type="text" class="form-control" formControlName="stake">
      </div>
      <hr>
    </div>
  </form>
   <!---this it's only to check the value of the form-->
  {{dataForm?.value |json}}
</div>

像component.ts

@Component({
  selector: 'app-app-form',
  templateUrl: './app-form.component.html',
  styleUrls: ['./app-form.component.css']
})
export class AppFormComponent implements OnInit {

  dataForm: null | undefined | FormGroup;  //we have a dataForm
  data: any;  //normally we have a data too. It's not necesary that the data was identical to dataFrom 
  labels:any[] //we create an array [{Id,Text}]
  yet:boolean=false;  //I use this variable when all it's ready

  get lista() {  //<--This is the gettet that we use in the *ngFor
    return (this.dataForm) ? this.dataForm.get('lista') : null;
  };

  constructor(private fb: FormBuilder, private dataService: AppDataService) { }

  ngOnInit() {
    let key: any;
    this.dataService.read(key).subscribe(
      (response:any[]) => {
    if (response) {
      this.data = response; //this.data is an array[{"Id": 1,..}.{"Id":2..}]
      //You can create a label array with Id,Text
      this.labels=response.map((item:any)=>{return {Id:item.Id,Text:item.betslipTeamName}})
      this.dataForm = this.createFormGroup(this.data);// dataForms is an object {lista:[{..},{..}]}
      this.yet=true;
    }
  });
  }
  submit(dataForm:any)
  {
    if (dataForm.valid)
    {
      console.log(dataForm.value);
    }
  }
  createFormGroup(data: any) {
    let lista = this.buildArray(data);  //create an array of Controls

    let dataForm = this.fb.group({
      lista: lista
    });
    //see that dataForms is an object {lista:[{..},{..}]}
    return dataForm;
  }

  buildArray(myArray: any[]) {
    //witch each data, we create a fbGroup 
    const arr = myArray.map(data => {
      return this.fb.group({
        "Id": [data.Id], //we can omit some control
        "betslipTeamName": [data.betslipTeamName],
        "stake": [data.stake],
      });
    });
    //And return a array of fbGroup
    return this.fb.array(arr);
  }
}