gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 01:55:35 25 4
gpt4 key购买 nike

我目前正在开发一个使用 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 的类及其属性。

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

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

预先感谢您的宝贵时间!

最佳答案

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

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

关于javascript - Angular 5 与 Materialize CSS 绑定(bind)选择/选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50253334/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com