перед инициализацией просмотра как назначить опции

Question

Я получаю выпадающие данные из БД, для этого я написал сервис.Когда я обновляю страницу, требуется время, чтобы получить ответ 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>

Пожалуйста, дайте мне знать, как я могу динамически инициализировать опции