如何修复此代码，以便从服务中获取数据并使用反应式表单将其发送到我的表单？

Question

在我的应用程序中，我创建了一个伪造的服务器以从中获取值，然后使用service返回所有值并将其发送到表单。

1。我的HTML：

    <form [formGroup]="Field"> 
  <table class="table">
        <tr>
            <th scope="col">Branch</th>
            <th scope="col">Realisation N-1</th>
            <th scope="col">L'objectifs</th>
            <th scope="col">Taux de Croissance</th>
        </tr>
        <tr  class="back-color">
            <td><label formControlName="nom" ></label></td>
            <td><input formControlName="realisation"   /></td>
            <td><input formControlName="objectif"      /></td>
            <td><input formControlName="TC"            /></td>
        </tr>
        <tr FormArrayName="sousbranch"> 
            <td><label formControlName="s_nom"></label></td>
            <td><input formControlName="s_realisation"  /></td>
            <td><input formControlName="s_objectif"       /></td>
            <td><input formControlName="s_TC"           /></td>
        </tr>
  </table>
</form>

2。我的服务：

   baseUrl = http://localhost:3000/branche       

   constructor(private httpClient: HttpClient) {}      

// ...从服务器获取所有分支

     getBranches(): Observable<Ibranch[]>{        
       return this.httpClient.get<Ibranch[]>(this.baseUrl)      
            .pipe(catchError(this.handleError));        
        }   

3.my Component Methode：

// .. Ibranch是所有分支键名称的接口
（.. Ibranch具有IsBranch数组）
// .. IsBranch还是具有souBranch所有值的接口

branches : Ibranch[]; 
  constructor(private fb: FormBuilder,
              private _BranchesService:BranchesService) {
}
 Field : FormGroup;
  ngOnInit() {
    this.Field = this.fb.group({
      nom : [''],
      objectif : [''],
      realisation : [''],
      TC : [],
      sousbranch : this.fb.array([
          this.fb.group({
            s_nom : [],
            s_realisation : [],
            s_objectif : [],
            s_TC : []
          })
      ])
    });
  } 

// ..订阅getBranches Methode：

 getBranche(){
    this._BranchesService.getBranches().subscribe( 
      (branch : Ibranch[]) => this.setBranch(branch['']),
      //(branch : Ibranch[]) => branch[''],
      (err : any)      => console.log(err)
    );
  } 

                   <br>

// ..将值设置为

setBranch(branche : Ibranch){
     this.Field.patchValue({
          nom : branche.nom,
          realisation : branche.Taux_de_Croissance,
          objectif : branche.objectif,
          TC : branche.Taux_de_Croissance,
     });  this.Field.setControl('sousbranch',this.setExistingSBranch(branche.sousBranch))
  }
  setExistingSBranch(branchset : Isbranch[]) : FormArray{
   const Formarray = new FormArray([]);
  branchset.forEach(b => {
    Formarray.push(this.fb.group({
       s_id : b.s_id,
       s_nom : b.s_nom,
       s_realisation : b.s_realisation,
       s_objectif : b.s_objectif,
       s_Taux_de_Croissance : b.s_Taux_de_Croissance  
     }))
   });
   return Formarray;
  }   

请注意，每个分支都有几个soubranch， 这个图片将解释我搜索它的结果 this is thee resulta :

stackblitz中的代码：https://stackblitz.com/edit/angular-cdzfrw
但是该应用无法正常工作。

非常感谢您回答我的问题