Question

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

这是我的JSON响应：

{
    "data": [  
        {
            "id": 1,
            "email": "jose@hotmail.com",
            "password": "$2a$10$44ghfG4Ym4COxXbj9pDBuOLBXCPRRDiIM7y77G.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

如果添加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

Answer 2

很明显，因为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 3

user.acessTypes是一个数组。

使用以下索引。

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

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

3 个答案: