具有实现CSS的角度5绑定选择/选项

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>

我还有两个名为Project和Sector的类，它们具有它们的属性。
为了确定，我添加了一个超时来初始化实例化选择。
我仍在努力，如果找到任何解决方案，我会提供更新。
提前感谢您的时间！

Answer 1

您可以在* .component.ts文件中执行此操作。我正在使用Angular 8，这对我来说很好用，这是模型绑定的快速解决方法，您可以将值绑定到Submit函数中的模型。我使用了map函数，因为如果您使用多次选择，则getinstance（）将返回一个数组。希望对您有帮助！

import * as M from 'materialize-css';

export class ComponentName implements AfterViewInit {
 instance;

 ngAfterViewInit(){
     // initializing Selcet 
     this.instance = M.FormSelect.init(document.querySelector('select'));  
 }

  onSubmit(){
    //returns an array in case of multiple select
    this.instance.getSelectedValues().map((elem) =>{
    console.log(elem)
  })
 } 
}