Angular Служба резольвера работает неправильно

Question

RoleList Component:::
import { Global } from "./../../../global/serverlinks";

import { Component, OnInit, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { Router, ActivatedRoute, ParamMap } from "@angular/router";
import { RoleserviceService } from "src/app/Service/roleservice.service";
import {BsModalComponent} from "ng2-bs3-modal"

@Component({
  selector: "app-rolelist",
  templateUrl: "./rolelist.component.html",
  styleUrls: ["./rolelist.component.css"]
})
export class RolelistComponent implements OnInit {
  public data: any;
  public error: any;
  public name: string;
  constructor(
    public http: HttpClient,
    public router: Router,
    public route: ActivatedRoute,
    public service: RoleserviceService
  ) {}

  ngOnInit() {
     this.route.data.subscribe(
      result=>this.data=result.roleList
    );

  }
  showResult() {
    console.log(
      this.http.get<Observable<any>[]>(Global.BASE_HOST_ENDPOINT).subscribe(
        data => {
          (this.data = data), console.log(data);
        },
        error => {
          (this.error = error), console.log(error);
        }
      )
    );
  }

  EditRole(id) {
    let role;
    this.service.GetRole(id).subscribe(res => {
      (role = res),
        console.log("Role found:" + role),
        this.router.navigate([
          "editrole",
          id],{queryParams:{name:role.name},skipLocationChange:true}),
      err => console.log(err);
    });
   
  }
  DeleteRole(id,index){
    let role;
    this.service.GetRole(id).subscribe(
      result=>{
        this.service.DeleteRole(id).subscribe(
          result=>{
            console.log(result)
            this.data.remove(index) 
          },
          err=>console.log(err)
        )
      }
    )
  }

}

Resolver Service::
import { RoleserviceService } from './roleservice.service';
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Role } from '../Model/role';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Global } from '../global/serverlinks';
@Injectable()

export class RoleListResolverService implements Resolve<Role[]>{
    constructor(public service:RoleserviceService,public http:HttpClient){}

  resolve(route: ActivatedRouteSnapshot,state:RouterStateSnapshot):Observable<Role[]>{
      return this.http.get<Role[]>(Global.BASE_HOST_ENDPOINT)
  }
}

<div *ngFor="let role of data">

    <div class="card mb-2 border-dark">
        <div class="card-header">
            {{role.name}}
        </div>
        <div class="card-body pl-3">
            This is {{role.name}} role.
        </div>
        <div class="card-footer">
            <div class="btn-group">
                <a>
                    <button class="btn-primary" routerLink="/editrole/{{role.id}}"
                        (click)="EditRole(role.id)">Edit</button>
                </a>
                <a>
                    <button class="btn-danger" (click)="DeleteRole(role.id,1)">Delete</button>
                </a>
            </div>
        </div>

        <div class="card">
            <div class="card-header">Users</div>
            <div class="card-body list-group pl-3">

                <div *ngIf="role.users!=null  else elseBlock">
                    <div *ngFor="let user of role.users">
                        <div class="font-weight-bold">{{user.name}}</div>
                    </div>

                </div>
            </div>
            <div #elseBlock>
                <div class="font-weight-bold">No Members Yet</div>

            </div>
            <a>
                <button class="btn btn-outline-dark">Manage Users In{{role.name}} role</button>
            </a>
        </div>

    </div>
</div>

Я использовал службу распознавания для отображения списка ролей и соответствующих пользователей. Список не полностью заполняется в начале, но как только я нажимаю любую кнопку, он загружается. в чем проблема?. . На изображении ниже показана роль менеджера, но только после того, как я нажал кнопку. До этого показывалось поле Outline, но не название роли.

введите описание изображения здесь

Answer 1

Это первое изображение, в котором роль менеджера не отображается. Роль менеджера не отображается, но как только я нажимаю любую кнопку, она появляется.

Answer 2

Пожалуйста, попробуйте это

<div class="card">
<div class="card-header">Users</div>
<div class="card-body list-group pl-3">
    <div *ngIf="role.users.length>0;else elseBlock">
        <div *ngFor="let user of role.users">
            <div class="font-weight-bold">{{user.name}}</div>
        </div>
    </div>
</div>
<ng-template #elseBlock>
    <div class="font-weight-bold">No Members Yet</div>
</ng-template>
<a>
    <button class="btn btn-outline-dark">Manage Users In{{role.name}} role</button>
</a>