Html未显示Angular中Component的列表

Question

正如标题所示，这基本上是我的问题。我从Api获取组件中的对象列表。当我在控制台上显示该列表以进行检查时，该列表加载了正确的数据

使用*ngFor创建表时，会识别表中的对象数量，但不会识别属性。

我有一个接口来映射从api接收到的对象。

我尝试构建一个已经加载在组件上的数组，并且表被正确加载，所以问题出在我从Api响应加载的列表上。

这是我的服务：(这很好用(

@Injectable({
providedIn: 'root'
})
export class UserService {
private baseUrl: string = environment.baseUrl + 'api/';
constructor(private http: HttpClient) { }

public getUsers(): Observable<ShowUserModel[]> {
return this.http.get<ShowUserModel[]>(this.baseUrl + `users`);
}
}

这是我的组件：

@Component({
selector: 'app-user-list',
styleUrls: ['./user-list.component.css'],
providers: [UserService],
templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
public users: ShowUserModel[] = [];
constructor(private router: Router,
private service: UserService) { }
ngOnInit(){
this.getUsers();
}
public getUsers(){
this.service.getUsers().subscribe(data =>{
this.users = data;
console.log(data)
} );
}

这是html模板：

<div class="jumbtron">
<h1 class="display-4 text-center">Users</h1>
</div>
<div class="container">
<button type="button" class="btn btn-success" (click)="addUser()">New User</button>
<hr />
<table class="table table-dark table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">Username</th>
<th scope="col">Id</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<th scope = "row">{{user.Username}}
<td>{{user.Id}}</td>
<td>{{user.Role}}</td>
</tr>
</tbody>
</table>
</div>

谢谢！

这是表格

这是来自阵列的控制台日志

Answer 1

错误的字段名称。应为：

<th scope="row">{{user.username}}
<td>{{user.id}}</td>
<td>{{user.role}}</td>