Question

我有2个选择，我想从mysql表中填充数据。

我的选择是每隔3或4次添加一次数据，让我想一想，因为我的HTML在数据库从数据库加载之前就已经呈现了。

我试图用以下内容包围我的HTML：

<div *ngIf="isDataLoaded">
</div>

如果有的话，这似乎没什么帮助。

然后我尝试用一些Javascript重新渲染我的表，并且能够添加项目但是在我的数组上运行并使用javascript添加它们似乎是错误的方法吗？

我的选民看起来像这样：

<div class="col-sm-12">
    <label class="col-sm-4 control-label" for="textinput">Person</label>
        <select #person id="personselector" class="m_selectpicker form-control m-bootstrap-select--solid" data-live-search="true">
        <option value="">
            Person  
        </option>                               
        <option *ngFor="let person of persons" [value]="person.id">
            {{person.firstname}}
        </option>                               
        </select>
</div>

有没有我可以确保数据会被添加到我的下拉列表中？

在此处获取我的数据，并且它们正在控制台中正确显示。

fillDropdowns(){
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('payingcustomerID', '1');       
    let body = urlSearchParams.toString()

   this.http.post('XXX',body,{headers: headers}).map(response => response.json())
   .subscribe(data => {

    this.companies = data.companies;
    this.persons = data.persons;

    console.log(this.companies);
    console.log(this.persons);      
   })  
}

这是我称之为方法的地方

ngOnInit() {
        this.fillDropdowns();
}

这项工作在javascript中

 for(let person of this.persons){
        myExtObject.func2(person.id,person.firstname);          
     } 

    for(let company of this.companies){
        myExtObject.func3(company.id,company.name);          
    }
    myExtObject.func4();

javascript代码

func2: function(value, desc) {      
    $("#personselector").append('<option value="'+value+'" selected="">'+desc+'</option>');     
},

func3: function(value,desc) {       
    $("#companyselector").append('<option value="'+value+'" selected="">'+desc+'</option>');        
},  
func4: function() {     
    $("#personselector").selectpicker("refresh");
    $("#companyselector").selectpicker("refresh");

    $('#personselector').val('');
    $('#personselector').selectpicker('render');
    $('#companyselector').val('');
    $('#companyselector').selectpicker('render');         
}

Answer 1

修改fillDropdowns方法，如下所示

fillDropdowns(){
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('payingcustomerID', '1');       
    let body = urlSearchParams.toString()

  return this.http.post('XXX',body,{headers: headers}).map(response => response.json())
   )  
}

让它返回一个普通的可观察者，不要在里面订阅。并且在你的ngOnInit调用中订阅了这个方法

ngOnInit() {
        this.fillDropdowns().subscribe(data => {

        this.companies = data.companies;
        this.persons = data.persons;

        console.log(this.companies);
        console.log(this.persons);      
       };

}

这将解决问题。

数据仅每三次左右加载一次

1 个答案: