如何在输入字段中以角度9+显示数据？

Question

我想在相应的输入字段中显示相应的数据，这些数据来自数据库，而我希望在发布请求后将相同的数据保存在数据库中。有什么解决方案吗？ 我有两种形式，分别包含名称，部门，终端等。

TS文件

getNameDiv() { 
  this.collectionService.getUserDiv().subscribe((rec: any) => { 
    this.userDivData = rec;  //getting data here 
   
    this.dataCollection(this.userDivData); //passing data to dataCollection method to get data as user wise
  },
    err => {
      if (err.status == 400)
        this.toastr.error('Server error or bad request', 'Error');
      else
        this.toastr.error('Faild to get data', 'Server Error');
    }
  );
}
  dataCollection(data): void { 
  const dataCollection= {}
  for (let entry of data) {
    if (!dataCollection[entry.trnUser])
    {
      dataCollection[entry.trnUser] = {
        tUser: entry.trnUser, tDivision: entry.division, tTerminal: entry.terminal, tStart:entry.start, tEnd: entry.end
      }
    }
  }
  this.finalData = Object.values(dataCollection);
  console.log(this.finalData);
}

HTML文件

<div class="row">
  <div class="col-md-6">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text"><i
                    class="fa fa-building pr-1"></i> Division<small
                    class="mandatory">*</small>
            </span>
        </div>
        <span *ngFor="let rdata of finalData  class="form-control">{{rdata?.tDivision}} </span> // here i want to display respective division with respective name
        <input formControlName="Division" hidden> // i need to display tDivision in input fild but i couldnot and i used span tag to display data.
    </div>
</div>
<div class="col-md-6">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-user pr-1"></i>
                Name<small class="mandatory"> *</small></span>
        </div>
        <span *ngFor="let rdata of finalData" class="form-control">{{rdata?.tUser}}</span> // here i want to display name with the
        <input formControlName="Name" hidden>
    </div>
  </div>
</div>
<div class="row pt-1">
  <div class="col-md-6">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-store-alt pr-1"></i>
                Terminal</span>
        </div>
        <span *ngFor="let rdata of finalData"  class="form-control">{{rdata?.tTerminal}}</span> // here i want to display respective division with respective name
         <input formControlName="Division" hidden> 
        
    </div>
</div>
<div class="col-md-6">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-clock pr-1"></i>
                Shift</span>
        </div>
        <input  class="form-control" value="Morning" required readonly>
    </div>
  </div>
</div>

屏幕截图

我有两个数组数据，我想以HTML形式显示它们各自的数据。我在表格中同时获得了用户名和我不想要的两种形式。具有单个名称及其数据的单个表单。 有什么解决方案吗？