如何在usercard angular5上获取用户角色和显示

import { Component, OnInit } from '@angular/core';
import { UserService } from 'path/to/user.service';

constructor(private userService: UserService) { }

ngOnInit() {
  this.getUserRole();
}

getUserRole() {
  this.userService.getUserRole().subscribe(
    (role: string) => {
      // 在这里处理获取到的用户角色
      this.displayUserRole(role);
    },
    (error) => {
      console.error('获取用户角色失败：', error);
    }
  );
}

displayUserRole(role: string) {
  // 在这里将用户角色显示在usercard上
  // 例如，将角色赋值给组件的一个属性
  this.userRole = role;
}

<div class="user-card">
  <h2>User Card</h2>
  <p>User Role: {{ userRole }}</p>
</div>