Как отфильтровать определенное значение из трубы KeyValue для отображения под определенным заголовком в таблице HTML |Угловой 6+

Question

В основном у меня есть некоторые данные JSON (объекты: пары значений ключей), и я хочу отобразить их в HTML-таблице, так как у меня есть только объекты в моем JSON, я использую канал Keyvalue, но проблема в том, что я получаю все значенияиз значения ключа трубы случайным образом и отображается в ячейке таблицы.я хочу отображать конкретно под соответствующими заголовками.

Я хочу использовать такие данные, как {{key1.value1}}, {{key2.value2}} ... и т. Д.

Мой component.ts

products: string[];

конструктор (частный httpService: HttpClient) {}

ngOnInit () {

this.httpService.get('products.json').subscribe(
  data => {
    this.products = data as string[] ;


  },
  (err: HttpErrorResponse) => {
    console.log (err.message);
  });}}

Мой component.html

                          <table>
                          <thead>
                           <tr>

                              <th>Parameter</th>
                              <th>Order Val</th>
                              <th>Order Min</th>
                              <th>Order Max</th>
                          </tr>
                          </thead>

                     <tbody>
                     <tr *ngFor='let product of products | keyvalue'>
                        <td>{{product.value}}</td>

                           </tr>
                         </tbody>
                        </table>

Данные Json

{"parameter": "specimen", "orderVal": 2, "orderMin": 1, "orderMax": 6,}