[英]Html not showing list from Component in Angular
As the Title shows, that is basically my problem.正如标题所示,这基本上是我的问题。 I get my list of objects in my component from the Api.
我从 Api 获取组件中的对象列表。 The list is loaded with the correct data as I show it on the console to check it.
该列表加载了正确的数据,因为我在控制台上显示它以进行检查。
When the table is created with the *ngFor, recognizes the amount of objects inside but not the attributes.当使用 *ngFor 创建表时,会识别其中的对象数量,但不会识别属性。
I have an interface to map the objects received from the api.我有一个到 map 的接口,从 api 收到的对象。
I tried building an array already loaded on the component and the table gets loaded correctly, so the problem is with the list that i load from the Api response.我尝试构建一个已经加载到组件上的数组并且表格被正确加载,所以问题在于我从 Api 响应加载的列表。
This is what i have on my service: (This works fine)这就是我的服务:(这很好用)
@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`);
}
}
This is my component:这是我的组件:
@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)
} );
}
And this is the html template:这是 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>
Thanks!谢谢!
Bad field names.字段名称错误。 Should be:
应该:
<th scope="row">{{user.username}}
<td>{{user.id}}</td>
<td>{{user.role}}</td>
Your field names must be lowercase like {{user.id}}您的字段名称必须小写,例如 {{user.id}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.