使用 Angular 显示对象对象而不是数据

Question

我是 Angular 的新手，我正在执行 Web 服务请求以填充 table。我正在使用 *ngFor 来填充我的 table。我正确地收到了我的电子邮件，但树中的其他元素显示为 [Object object]

这是我的 JSON 回复：

{
    "data": [  
        {
            "id": 1,
            "email": "jose@hotmail.com",
            "password": "aghfG4Ym4COxXbj9pDBuOLBXCPRRDiIM7y77G.XEh7avm2GOxlUC",
            "isAdmin": 0,
            "acessTypes": [
                {
                    "id": 1,
                    "accessTypeName": "User",
                    "subAcessTypeName": "Ver&Escrever"
                }
            ],
            "tomas": [],
            "consultas": [],
            "profile": "NORMALUSER"
        }
    ],
    "dataArray": null,
    "errors": []
}

这是我的 Angular 代码´

<table class="table table-bordered">
          <tr>
            <th>Email</th>
            <th>Tipo de acesso</th>
            <th>SubTipo de acesso</th>
          </tr>
          <tr *ngFor="let user of listUser">
            <td>{{user.email}}</td>
            <td>{{user.acessTypes}}</td>
            <td>{{user.acessTypes}}</td>
          </tr>
        </table>

这是我的用户组件

findAll(){
    this.userService.findAll().subscribe((responseApi: ResponseApi)=>{
      this.listUser = responseApi['data'];
    }, err => {
      this.showMessage({
        type: 'error',
        text: err['error']['error'][0]
      });
     }
    )
  }

Answer 1

很明显，因为user.acessTypes是一个对象数组。

您需要从对象访问特定值。

<tr *ngFor="let user of listUser">
            <td>{{user.email}}</td>
            <td *ngFor="let i of user.acessTypes">{{i.accessTypeName}}</td>
            <td *ngFor="let i of user.acessTypes">{{i.subAcessTypeName}}</td>
</tr>

或使用一个内循环。

    <tr *ngFor="let user of listUser">
                <td>{{user.email}}</td>
               <ng-container *ngFor="let i of user.acessTypes" >
                <td>{{i.accessTypeName}}</td>
                <td>{{i.subAcessTypeName}}</td>
               </ng-container>
    </tr>

Answer 2

user.acessTypes是一个数组。

使用索引如下。

<td>{{user.acessTypes[0].accessTypeName}}</td>
<td>{{user.acessTypes[0].subAcessTypeName}}</td>

Answer 3

如果你添加 json 管道，那应该会显示完整的数据 <td>{{user.acessTypes | json}}</td>

但是您必须遍历 acessTypes 数组才能访问单个对象属性

<table class="table table-bordered">
    <tr>
        <th>Email</th>
        <th>Tipo de acesso</th>
        <th>SubTipo de acesso</th>
    </tr>
    <tr *ngFor="let user of listUser">
        <td>{{user.email}}</td>
    <ng-container *ngFor="let type of user.acessTypes">
        <td>{{type.accessTypeName}}</td>
         <td>{{type.subAcessTypeName}}</td>
    </ng-container>
    </tr>
</table>

DEMO

使用 Angular 显示对象对象而不是数据

Object object is showing instead of data using Angular

typescript

ngfor

angular