循环遍历JSON键以匹配输入，然后使用角度6输出键值

Question

我是第一次使用angular的新开发人员。我正在尝试遍历应用程序中的JSON文件中的数据（目前非常基本）以匹配两个输入字段，第一个输入匹配一个对象，第二个输入匹配所述对象中的键，然后最终输出密钥的值。

这是我的data.json文件

{
 "0.5t": {
   "7m": "20t",
   "8m": "20t",
   "9m": "20t",
   "10m": "20t",
   "12m": "20t",
   "14m": "20t",
   "16m": "20t",
   "18m": "20t",
   "20m": "20t",
   "22m": "20t",
   "24m": "25t",
   "26m": "25t",
   "28m": "35t",
   "30m": "35t",
   "32m": "50t",
   "34m": "50t",
   "36m": "70t",
   "38m": "70t",
   "40m": "80t",
   "42m": "80t",
   "44m": "80t",
   "46m": "90t",
   "48m": "120t",
   "50m": "120t",
   "52m": "120t",
   "54m": "120t"
   },
 "1t": {
   "7m": "20t",
   "8m": "20t",
   "9m": "20t",
   "10m": "20t",
   "12m": "20t",
   "14m": "20t",
   "16m": "20t",
   "18m": "20t",
   "20m": "25t",
   "22m": "25t",
   "24m": "35t",
   "26m": "35t",
   "28m": "50t",
   "30m": "50t",
   "32m": "60t",
   "34m": "70t",
   "36m": "70t",
   "38m": "70t",
   "40m": "80t",
   "42m": "80t",
   "44m": "90t",
   "46m": "100t",
   "48m": "120t",
   "50m": "120t",
   "52m": "120t",
   "54m": "120t"
   },
 "2t": {
   "7m": "20t",
   "8m": "20t",
   "9m": "20t",
   "10m": "20t",
   "12m": "20t",
   "14m": "20t",
   "16m": "25t",
   "18m": "25t",
   "20m": "35t",
   "22m": "35t",
   "24m": "50t",
   "26m": "50t",
   "28m": "60t",
   "30m": "60t",
   "32m": "70t",
   "34m": "80t",
   "36m": "80t",
   "38m": "80t",
   "40m": "90t",
   "42m": "100t",
   "44m": "100t",
   "46m": "120t",
   "48m": "120t",
   "50m": "160t",
   "52m": "160t",
   "54m": "160t"
  }

}

我的service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';

    @Injectable({
     providedIn: 'root'
    })
    export class DataService {

     constructor(private httpService: HttpClient) {   }

     configUrl = '../assets/data.json';

     getCrane() {
      return this.httpService.get(this.configUrl);
     }

    }

calculator.component.ts 这是我遇到的问题。

    import { Component, OnInit } from '@angular/core';
    import { DataService } from '../data.service';

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


    public num1 :string;
    public num2 :string;
    public result :string;

    cal_crane() {
    this.num1 = this.num1 + 't';
    this.num2 = this.num2 + 'm';
    }

    data;

    constructor(private myService: DataService) { }

    ngOnInit() {
      this.myService.getCrane().subscribe(res => this.data = res);
      }

    }

component.html文件 基本上有两个输入和一个结果。

    <h1>Crane Calculator App</h1>

    <input [(ngModel)]='num1' type="number" name="num" placeholder="Weight 
     to be lifted ">
    <input [(ngModel)]='num2' type="number" name="num" 
     placeholder="Distance from crane "><br><br>

    <button (click)='cal_crane()'>Get your Crane </button>

    <br>
    <br>
    <h2>{{result}}</h2>

我要按照正确的方式进行吗？