在我的项目中,我从https://jsonplaceholder.typicode.com/users获取数据
我是Angular的新手,所以如果您发现我获取数据的方式有些愚蠢,请警告我。
dataFromServer;
constructor(private http: HttpClient){
this.dummyPromise.then(
response => {
console.log("response from dummy promise:", response);
this.dataFromServer = response;
},
error => {
console.log("Error happened with dummy promise:", error)
}
)
}
dummyPromise = new Promise((resolve, reject) => {
this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(data => {
console.log(data);
this.dataFromServer = data;
});
//resolve(returnData);
});
问题是,在我的HTML文件中,我将数据写到了这样的表中:
<tr *ngIf="dataFromServer">
<td>{{dataFromServer[0].id}}</td>
<td>{{dataFromServer[0].name}}</td>
<td>{{dataFromServer[0].username}}</td>
<td>{{dataFromServer[0].email}}</td>
</tr>
<tr *ngIf="dataFromServer">
<td>{{dataFromServer[1].id}}</td>
<td>{{dataFromServer[1].name}}</td>
<td>{{dataFromServer[1].username}}</td>
<td>{{dataFromServer[1].email}}</td>
</tr>
...适用于所有10个人。我想动态地做到这一点,因为我要获得的行数与人们的数据一样多。
答案 0 :(得分:0)
我认为您应该尝试使用* ngFor而不是* ngIf。我给你举个例子。
<tr *ngFor="let data of dataFromServer">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.username}}</td>
<td>{{data.email}}</td>
</tr>
因此,它将对dataFromServer中的每个对象重复
答案 1 :(得分:0)
使用ngFor
遍历数据数组:
<table *ngIf="dataFromServer">
<tr *ngFor="let item of dataFromServer">
<td>{{item.id}}</td>
...
</tr>
</table>
如果ngIf
为空/未定义,则table
上的dataFromServer
条件将防止控制台错误/渲染问题
答案 2 :(得分:0)
您可以使用*ngFor
来完成。在html中,通常是。作为示例,我们假设我们有一个像这样的组件:
private users: User[] = [];
ngOnInit(){
this.service.getUser()
.subscribe(userList => {
this.users = userList;
});
}
User类:
export class User {
public id: number;
public name: string;
}
您可以通过以下方式在HTML中使用* ngFor:
<span *ngFor="let user of users">
UserID: {{user.id}} - User Name: {{user.name}}
</span>
因此,基本上,与您的代码相关,只需将您从http调用中获得的json数据放入User对象中,,然后像这样修改html即可:
<tr *ngFor="let user of users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
.....
</tr>
答案 3 :(得分:0)
您可以将下面的html代码替换为
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
<p>Show boxes of type:</p>
<button id="toggleAll">Show all</button>
<button id="toggleA">Show group A</button>
<button id="toggleB">Show group B</button>
<hr />
<div id="a1" class="box groupA">
<h4>Title</h4>
<p>Text for box A1</p>
</div>
<div id="a2" class="box groupA">
<h4>Title</h4>
<p>Text for box A2</p>
</div>
<div id="b1" class="box groupB">
<h4>Title</h4>
<p>Text for box B1</p>
</div>
<div id="b2" class="box groupB">
<h4>Title</h4>
<p>Text for box B2</p>
</div>
</body>
</html>