如何使用 ngfor 在 angular 的數組中顯示 object？

Question

我有一些具有這種結構的數據

(users)
    [
    {
        "id": --,
        "Name": "--",
        "Email": "--",
        "Password": "--",       
        "group": {
            "id": 1,
            "name": "--",
        },
        "school": {
            "id": 1,
            "name": "--",
        }
      }
    ]

我正在嘗試使用 ngFor 在 angular 中顯示它

                            <tr *ngFor="let users of listUsers">
                            <td><div >{{ usuario.id}}</div></td>
                            <td><div >{{ usuario.Name }}</div></td>                 
                            <td><div >{{ usuario.Email }}</div></td>
                            <td><div >{{ usuario.Password }}</div></td>
                            <td *ngFor="let group of users.group"><div> 
                            {{group.Name}}</div></td>
                            <td><i  class="fas fa-edit text-primary"></i></td>
                          </tr>

但是由於某種原因它不起作用，我已經經歷了類似的問題並且找不到解決方案。

.ts file:

import { users } from '../../models/users';

listUsers: users[] = [];
ngOnInit(): void { getUsers()}

getUsers(){
    this.usersService.getUsers().subscribe(data => {
      console.log(data);
      this.listUsers= data;
    }, error=>{
      console.log(error);
    })
  }

模型文件：

export class users{
id: number;
Name: string;
Email: string;
Password: string;
group: any;
school: any;

constructor(Name: string,
    Email: string, Password: string , group: any , school: any){
    this.Name=Name;
    this.Email=Email;
    this.Password=Password;
    this.group= group;
    this.school=school;
}  

}

我需要在表格中顯示

• ID
• 姓名
• Email
• 密碼
• 團隊名字
• 學校名稱

Answer 1

使用正確的名稱來迭代數組並引用模板中的值。

順便說一句，保持一個關於鍵名的約定（非大寫字母會更好）。

 <tr *ngFor="let user of users"> <td> <div>{{ user.id}}</div> </td> <td> <div>{{ user.Name }}</div> </td> <td> <div>{{ user.Email }}</div> </td> <td> <div>{{ user.Password }}</div> </td> <td *ngFor="let group of user.group"> <div> {{group.name}}</div> </td> <td><i class="fas fa-edit text-primary"></i></td> </tr>