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

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

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

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

如果last === true，则您的下拉列表已完成，您可以使用$('select').material_select()从指令中对其进行实例化。

您也可以使用setTimeout，希望网络中没有延迟，在这种情况下，下拉列表当然不起作用。

Answer 3

用以下代码替换您的代码：

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

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

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

如何销毁选择2：http://materializecss.com/forms.html

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

选择不显示对象数组的选项

3 个答案: