у меня есть этот файл json :

 {
        "id": 1276,
        "etabName": "YAssineDev",
        "etabType": "OUR_SCHOOL",
       "users": [
            {
                "id": 12,
                "username": "YassineDev",
                "firstName": "yassine",
                "lastName": "messaoud",
                "active": true,
                "payant": false,
                "creatdateTime": "2021-06-08",
                "roles": [
                    {
                        "id": 2,
                        "roleName": "ADMIN_USER",
                        "description": "admin user"
                    }
                ]
            }
        ]
    },
 

я хочу отобразить имя пользователя вкладки «Пользователи» в html,
но оно показывает мне эти ошибки :

 Error: src/app/super-admin/dashboard/dashboard.component.ngtypecheck.ts:174:51 - error TS1003: Identifier expected.

174         ""   (((_t48 /*5654,5655*/). /*5656,5656*/) /*5654,5656*/);
                                                      ~
 

я пробовал с *ngFor:

 <tbody>
          <tr *ngFor="let t of tabs.users">
            <td>{{ t.username }}</td>
          </tr>
        </tbody>
 

GetMethod

   dataEtabUser() {
    this.cr.getdataEtab().subscribe(data=> {
      this.tabs = data
    })
  }
 

нгОнИнит

 this.dataEtabUser()
 

Обслуживание

 getdataEtab(): Observable<any> {
  return this.http.get<any>('http://localhost:8020/survey/etablissement/')
}
 

но ничего не отображалось

ПРОБЛЕМА(И) И ОЗАБОЧЕННОСТЬ(И)

Основываясь на вашем прикрепленном JSON, вы не можете получить доступ к пользователям, tabs.users поскольку tabs они содержат по крайней мере 1 или более элементов.

Я ожидаю, что ваш JSON представляет собой массив элементов, кажется, у вас есть запятая в конце JSON.

 [
    {
        "id": 1276,
        "etabName": "YAssineDev",
        "etabType": "OUR_SCHOOL",
        "users": [
            {
                "id": 12,
                "username": "YassineDev",
                "firstName": "yassine",
                "lastName": "messaoud",
                "active": true,
                "payant": false,
                "creatdateTime": "2021-06-08",
                "roles": [
                    {
                        "id": 2,
                        "roleName": "ADMIN_USER",
                        "description": "admin user"
                    }
                ]
            }
        ]
    },
    ...
]
 

Следовательно, вам нужно выполнить итерацию с каждым элементом, чтобы tabs затем только получить users его .

РЕШЕНИЕ(Ы)

РЕШЕНИЕ 1. Нанесите другой внешний слой для *ngFor для итерации с tabs элементами.

 <div *ngFor="let t of tabs">
  <p>TabName: {{t.etabName}}</p>
  <p>TabType: {{t.etabType}}</p>

  <table>
    <thead>
      <td>Username</td>
      <td>Firstname</td>
      <td>Lastname</td>
    </thead>
    <tbody>
      <tr *ngFor="let user of t.users">
        <td>{{ user.username }}</td>
        <td>{{ user.firstName }}</td>
        <td>{{ user.lastName }}</td>
      </tr>
    </tbody>
  </table>

  <hr />
</div>
 

Образец Стекблица для решения 1

РЕШЕНИЕ 2. Извлеките только первый элемент tabs

Если ожидается, что вы получите первый элемент только из tabs JSON, вы можете обратиться к этому решению.

1. Переименуйте в tab (тип: any ), чтобы избежать путаницы, поскольку извлекается только один элемент.

.компонент.ts

 @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  tab: any;

  ...

  dataEtabUser() {
    this.cr.getdataEtab().subscribe(data => {
      if (data)
          this.tab = data[0];
    });
  }
}
 

.component.html

 <table>
  <thead>
    <td>Username</td>
    <td>Firstname</td>
    <td>Lastname</td>
  </thead>
  <tbody>
    <tr *ngFor="let user of tab.users">
      <td>{{ user.username }}</td>
      <td>{{ user.firstName }}</td>
      <td>{{ user.lastName }}</td>
    </tr>
  </tbody>
</table>
 

Образец Стекблица для решения 2