select 选项不显示对象数组

Question

我的组件中有一个下拉菜单。这是组件的代码：

export class MyComponent  {

MyObjectArray: MyObject[] = [];

constructor(private _service: MyService)
}

ngOnInit() {
    this._service.get().do((response): MyObject[]) => {
        this.MyObjectArray = response;

        this.MyObjectArray.forEach((obj) => {
            console.log(obj.Code)
        });
    });

我的 html 是：

<select>
    <option [value]="obj.Code" *ngFor="let obj of MyObjectArray; let i = index">{{obj.Code}}</option>
</select>

在我的服务中：

return this._http.get(_url, this.options)
    .map(res => res.json())
    .catch(super.handlerError);

我的代码中有一个 console.log 来验证服务是否返回了一些东西并且我有结果。问题是为什么它对我的下拉菜单没有约束力。我确实检查了元素，但我的下拉列表中没有项目。

哦，有一件事，我试着把 ngFor 放在一个 div 里面，里面有 span，它工作正常。我只是不明白当我把它放在我的下拉菜单中时它不起作用。

编辑

现在当我检查元素时，我可以看到我的对象。但他们仍然没有出现在我的下拉列表中。这是我更改的内容：

this._service.get().subscribe(response => this.MyObjectArray = response);

编辑

我的 ngAfterViewInit()

上也有此代码

$('select').material_select();

Answer 1

尝试手动触发更改检测：

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

constructor(private cdr: ChangeDetectorRef){...}

this._service.get().subscribe(response => {
        console.log(JSON.stringify(response)); // what does this print
        this.MyObjectArray = response;
        this.cdr.detectChanges();
});

Answer 2

将您的代码替换为：

this._service.get().subscribe(response => {
        this.MyObjectArray = response;
        setTimeout(function(){
            $('select').material_select();
        },200);
});

代码：$('select').material_select(); 应该在值 init 之后初始化 select 框，或者您可以在 ngAfterViewInit 上初始化，但是您必须在获得时 destroy and reinit数据。

您正在正确获取数据，但问题是您在获取数据之前正在初始化 select 框，因此它不会自动更新 select 因为您已经使用 jQuery ，您必须重新初始化，才能显示更新后的数据。

如何销毁select2：http://materializecss.com/forms.html

$('select').material_select('destroy');

Answer 3

您有一个使用异步数据构建的下拉列表。然后你有 $('select').material_select() 实例化 select 和它的选项。

问题是在执行 ngAfterViewInit() 生命周期挂钩时，*ngFor 操作仍在进行中。您可以将 select 元素传递给它并自己检查它，我猜它不会列出任何选项。

我有一个类似的问题，我通过创建一个指令解决了它，在 *ngFor 元素上添加对它的引用，然后利用内置变量 last - let last = last ，并将其作为输入传递给指令。

如果 last === true 那么您的下拉列表就完成了，您可以使用 $('select').material_select().

从指令中实例化它

您也可以使用 setTimeout 希望网络中没有延迟来阻止事情发生，在这种情况下，下拉菜单当然不会工作。

select 选项不显示对象数组

select option not displaying array of object

materialize

drop-down-menu

ngfor

angular