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>我使用解析器服务列出角色和相应用户的列表。该列表在开始时并没有完全填满，但只要我按下任何按钮它就会加载。什么问题？
. 下图显示了经理角色，但前提是我单击了一个按钮。在此之前显示大纲框，但未显示角色名称。
