如何根据文本框值动态访问 javascript 对象的属性？

我是 angular 的新手。我坚持生成或更新关于文本框的表格。我有一个包含 3 个字段的架构 - 国家、销售和利润。有两个文本框，分别命名为 x 和 y 轴。更新 x 和 y 轴时应生成一个表格（文本框）。表格中的应为两列，说明 x 和 y 中的内容轴。

这是我的home.component.html

<div class="form-group">
        <form [formGroup]="myFormGroup">
            <label>x-axis : </label>
            <input type="text" class="form-control" formControlName = "xaxis" >  <br>
            <label>y-axis : </label>
            <input type="text" class="form-control" formControlName ="yaxis" > <br>
            <button class="apply-btn" (click)='apply(myFormGroup.value)'>Apply</button>
        </form>
    </div>

    <table class="table table-hover">
        <thead>
            <tr>
                <th>{{this.xaxis}}</th>
                <th>{{this.yaxis}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor = 'let product of products' cdkDrag>
                <td>{{product.xaxis}}</td>    **<----Here is the problem**
                <td>{{product.yaxis}}</td>
            </tr>   
        </tbody>
    </table>

这是我的home.component.ts

export class HomeComponent implements OnInit{

    products:any=[];
    xaxis:any;
    yaxis:any;
    myFormGroup:FormGroup;

    constructor(private service : ServiceService,private fb : FormBuilder) { 
      this.CreateForm();
    }

    //Fetching of data
    refreshData(){
      this.service.getAll().subscribe((res) => {
      this.products=res;
      })  
    } 

    CreateForm(){
      this.myFormGroup=this.fb.group({
        xaxis:['',Validators.required],
        yaxis:['',Validators.required]
      });
    }

  apply(formValue){
    this.xaxis=formValue.xaxis;
    this.yaxis=formValue.yaxis;
  }
  ngOnInit() {
      this.refreshData();
  }
}

文本框中的值应该是模式的属性，即国家、销售额和利润。例如，当我们分别为 x 和 y 轴输入国家和销售额时，表格应该从数据库中获取国家和销售额的值，然后用这些值更新表。