在查看初始化之前如何分配下拉选项

Question

我正在从db获取下拉数据，因为我已经编写了服务。刷新页面时，需要花费一些时间来获得http响应。在没有获取数据的情况下，我的放置视图初始化时没有选项。当我转到另一个页面并回来时，会显示选项。

当我在同一组件中返回服务器调用时，将显示下拉选项。当我写服务时，数据来晚了，下拉选项没有显示。

服务代码

master.service.ts ：

@Injectable({
    providedIn: 'root'
})
export class MasterService {
    _roles:any[];

    get roles() {
        if (this._roles != undefined) {
            return this._roles;
        } else {
            this._roles=[];
            this.apiservice.getData(UrlConfig.getroleids)
            .subscribe(
                (data: any) => {
                    return this._roles = data;
                }
            );
        }

    }
}

new-user.component.ts

export class NewUserComponent implements OnInit {

    roles=[];
    ngOnInit() {
        this.masterRoles =this.master.roles;
    }
}

new-user.component.html

<a class="dropdown-item" *ngFor="let source of masterRoles | shfilter: {rolename:filterRoleText} ">
  <label class="m-0 w-100 sh-icon-pointer" [for]="source.secroleid"> 
    <input type="checkbox" class="sh-checkbox-pointer-center" name="Producer-itemcheck" [id] = "source.secroleid" [checked]="source.checked"  (change)='select(source)'>
    <span class="pl-2">{{source.rolename}}</span>
  </label>
</a>

请让我知道如何动态初始化选项