Угловой 5 переплетных выбора / опции с материализацией CSS

Question

В настоящее время я работаю над проектом, использующим Angular 5, и фреймворк материализует css, и я столкнулся с проблемой выбора / опций. Я просмотрел другие посты и попробовал много решений, но они все еще не работают.

На данный момент у меня есть возможность отображать данные в списке выбора, но я не могу связать с ним никакие объекты.

Это мой component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { SectorService } from '../../../services/sector.service';
import { ProjectService } from '../../../services/project.service';
import { Sector } from '../../../models/sector';
import { Project } from '../../../models/project';
import { toast } from 'angular2-materialize';

declare var $: any;

@Component({
    selector: 'app-NewProject',
    templateUrl: './NewProject.component.html',
    providers: [SectorService, ProjectService]
})
export class NewProjectComponent implements OnInit, AfterViewInit {

    sectors: Sector[] = [];
    newProject = new Project();

    types = [{ value: 1, name: 'MS Access' }, { value: 2, name: 'Java' }, { 
value: 3, name: 'C#' }];
    risks = [{ value: 1, name: 'Low' }, { value: 2, name: 'Medium' }, { 
value: 3, name: 'High' }];

    constructor(private _serviceSector: SectorService,                
                private _serviceProject: ProjectService) { }

    ngOnInit() {
        this._serviceSector.GetAll().subscribe(sector => {
            this.sectors = sector;
            setTimeout(function () {
                $('select').material_select();
            }, 200);
        });
    }

    ngAfterViewInit() {
        /*$(document).ready(function () {
            $('select').material_select();
        });*/
    }

    public Submit(project) {
        console.log(this.newProject);
        toast('new project added !', 4000, 'rounded');
        //this._serviceProject.CreateProject(project).subscribe();
    }

}

Это мой html Я просто показываю вам выбор

<div class="row">
        <div class="input-field col s12">
            <select [(ngModel)]="newProject.type" name="types" id="types">
                <option *ngFor="let type of types" [ngValue]="type.name">{{type.name}}</option>
            </select>
            <label for="types">Technologies</label>
        </div>
    </div>

    <div class="row">
        <div class="input-field col s12">
            <select [(ngModel)]="newProject.idSector" name="sectors" id="sectors" aria-required="true">
                <option value="" disabled selected>Choose your sector</option>
                <option *ngFor="let sector of sectors" id="group_{{sector.id}}" [ngValue]="sector.id"> {{sector.name}} </option>
            </select>
            <label for="sectors">Sector</label>
        </div>
    </div>

У меня также есть 2 класса Project и Sector с их атрибутами.

Я добавил тайм-аут для инициализации выбора материализации, просто чтобы быть уверенным.

Я все еще работаю над этим, я дам обновления, если найду какие-либо решения.

Заранее благодарю за уделенное время!