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

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);      
       };
}

这将解决问题。