javascript - Angular 5 与 Materialize CSS 绑定(bind)选择/选项

Question

我目前正在开发一个使用 Angular 5 和框架 Materialize CSS 的项目，但我遇到了选择/选项的问题。我查看了其他帖子并尝试了很多解决方案，但仍然不起作用。

到目前为止，我可以在选择列表上显示数据，但无法与其绑定(bind)任何对象。

这是我的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 的类及其属性。

为了确定起见，我添加了一个超时来初始化具体化选择。

我仍在努力，如果找到任何解决方案，我会提供更新。

预先感谢您的宝贵时间!

Answer 1

在 Angular 9 中:我刚刚在 ngAfterViewInit() 中的代码下面添加了一个 hack，原因是选择在实际处理所有选项之前进行了初始化

setTimeout(() => {
      $('select').formSelect();
    }, 1000);