Как получить значение выбранного параметра в угловых 5

---

VS2017 использует .Net Core 2 с шаблоном Angular 5.

Как вы получаете значение для выбранного раскрывающегося списка?

Файл Typescript выглядит следующим образом:

import { Component } from '@angular/core';

@Component({
  selector: 'app-sku-registration-component',
  templateUrl: './sku-registration.component.html'
})
export class SkuRegistrationComponent {

  catalogs = [
    { catalogname: "Macy's", catalogcode: "100" },
    { catalogname: "Sears", catalogcode: "200" },
    { catalogname: "JCPenny", catalogcode: "300" },
    { catalogname: "LL Bean", catalogcode: "B5000" }
  ];

}

и HTML-файл такой:

<div class="container">
  <form #skuRegistrationForm="ngForm">
    
    <div class="form-group">
      <label for="power">Catalog</label>
      <select class="form-control" id="catalog"

              required

              [(ngModel)]="catalogs" name="catalogselector">
        <option *ngFor="let cat of catalogs" [ngValue]="cat">{{cat.catalogname + "(" + cat.catalogcode + ")"}}</option>
      </select>
    </div>
    <div>Selected catalog code: {{cat.catalogcode}}</div>
    <button (click)="incrementsku-registration()">SUBMIT</button>
  </form>
</div>

Я не могу получить следующую строку для отображения выбранного кода каталога:

<div>Selected catalog code: {{cat.catalogcode}}</div>

Мне нужно получить код каталога, чтобы я мог использовать его для фильтрации зависимого выпадающего списка.

Что я уже пробовал:

Я пробовал изменить [ngValue] на [value]

и я попробовал несколько вариантов следующего:

{{cat.catalogcode}}
{{каталоги}}
{{каталоги?.catalogcode}}
{{код каталога}}

---