Объект показывает вместо данных, используя Angular - PullRequest
Новая
       9

Объект показывает вместо данных, используя Angular

0 голосов
/ 25 сентября 2018

Я новичок в Angular, и я делаю запрос веб-службы для заполнения таблицы.Я использую * ngFor для заполнения своей таблицы.Я получаю свою электронную почту правильно, но другие элементы в дереве отображаются как [Объект объекта]

Это мой ответ 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": []
}

Это мой угловой код´ 

<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]
      });
     }
    )
  }

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

user.acessTypes - это массив.

Используйте индекс как показано ниже. 

<td>{{user.acessTypes[0].accessTypeName}}</td>
<td>{{user.acessTypes[0].subAcessTypeName}}</td>
0 голосов
/ 25 сентября 2018

Если вы добавите 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

0 голосов
/ 25 сентября 2018

Очевидно, потому что 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>
...