如何在JSON中的角度打字稿上获取值

Question

这是我使用 laravel spatie 的json响应，我创建了一个响应，显示用户是否具有 Roles

{
"message": "Successfuly fetch all User",
"error": false,
"error_code": 200,
"line": "line 117 UserController.php",
"data": [
    {
        "id": 1,
        "name": "dasdsa",
        "email": "dasdsad@gmail.com",
        "email_verified_at": null,
        "created_at": "2020-04-22T13:37:41.000000Z",
        "updated_at": "2020-04-22T13:37:41.000000Z",
        "roles": [
            {
                "id": 2,
                "name": "publisher",
                "guard_name": "web",
                "created_at": "2020-04-23T11:11:33.000000Z",
                "updated_at": "2020-04-23T11:11:33.000000Z",
                "pivot": {
                    "model_id": 1,
                    "role_id": 2,
                    "model_type": "App\\User"
                }
            }
        ]
    },
    {
        "id": 2,
        "name": "mdsadsadn",
        "email": "dasdsad@gmail.coms",
        "email_verified_at": null,
        "created_at": "2020-04-23T10:37:10.000000Z",
        "updated_at": "2020-04-23T12:04:46.000000Z",
        "roles": [
            {
                "id": 2,
                "name": "publisher",
                "guard_name": "web",
                "created_at": "2020-04-23T11:11:33.000000Z",
                "updated_at": "2020-04-23T11:11:33.000000Z",
                "pivot": {
                    "model_id": 2,
                    "role_id": 2,
                    "model_type": "App\\User"
                }
            }
        ]
    }
]

}

这是我在角度9.1.3 上的代码，用于在角色数组中获取值名称

export class UserComponent implements OnInit {
roles:any;
result:any;
constructor(private _userService:UsersService) { }

ngOnInit(): void {


 this.getallUser();
 }

getallUser(){
this._userService.getallUsers().subscribe((event : HttpEvent<any>) => { 

        if (event.type === HttpEventType.Response) {

            if (event.status == 200) {

                let body  = event.body;
                let error = body.error;
                let msg   = body.message;
                //alert(body);
                // console.log(body.data);

                if (!error) {
                    this.dataTbl.tblVal = body.data
                    this.roles = body.data.roles;

                    console.log(this.roles)
                     // this.result = this.roles.map(a => a.roles);
                     // console.log(this.result);


                    // console.log(this.dataTbl.tblVal)
                }
            }


        }

        this.dataTbl.tblLoad = false;



    }, (err : HttpErrorResponse) => {
        console.log(err);
    });     
 }
}

这是我的服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpHeaders } from '@angular/common/http';

 @Injectable({
  providedIn: 'root'
 })
 export class UsersService {

  constructor(private _httpClient: HttpClient) { 

} 

getallUsers() {

    return this._httpClient.get("http://localhost:8000/api/getallUser", { 
    observe: 'response', reportProgress: true });
    }
  }

我的问题是我想获取角色 example：publisher 中的名称值，但是我无法访问该对象如何获取该值，但错误未定义，我不知道我的代码有什么问题谢谢你的帮助