[英]How to Add ion-card with changing values programmatically in typescript?
I am building a simple app where i read some Posts from server and try to display the latest posts as cards in the screen . 我正在构建一个简单的应用程序,在该程序中,我从服务器读取了一些帖子,并尝试将最新的帖子显示为屏幕上的卡片。 I am still in a very early stage and i am testing as to how to add ion-card elements with changed contents and headers with typescript ? 我仍处于初期阶段,我正在测试如何添加内容已更改的离子卡元素以及带有打字稿的标头? my current code is like ths : 我当前的代码就像是这样:
fillPost() {
for (let i: number = 0; i < 10; i++) {
this.postContainer += "<ion-card> "
+ "<ion-item> <h2 item-left> Name here </h2>"
+ "<p> Post Number : +"i+" </p> </ion-item> <ion-card-content>"
+ "<p> Post Body here </p> </ion-card-content>"
+"<ion-row > <ion-col > <button ion- button icon- left clear small> "
+ "<ion-icon name= \"thumbs-down\" > </ion-icon>"
+ "< div > Report < /div>"
+ "</button>"
+ "</ion-col>"
+ "<ion-col center text-center>"
+ "<ion-note>"
+ "1h ago"
+ "</ion-note>"
+ "</ion-col>"
+ "</ion-row>"
+ "</ion-card>";
}
}
and in my HTML file : 在我的HTML文件中:
<div [innerHTML]="postContainer">
</div>
there is a button which called the fillPost() function as to test things out but the results looks like this : 有一个名为fillPost()函数的按钮,用于测试事物,但结果如下所示:
http://imgur.com/a/z5XyW http://imgur.com/a/z5XyW
please help me and thanks . 请帮助我,谢谢。
In Ionic it's not common to do the for loop in the ts file with html. 在Ionic中,使用html在ts文件中进行for循环并不常见。 You can use a *ngFor directly in the HTML 您可以直接在HTML中使用* ngFor
https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
<ion-card *ngFor="let item of i">
<ion-item>
<h2 item-left> Name here </h2>
<p> Post Number : {{item}} </p>
</ion-item>
<ion-card-content>
<p> Post Body here </p>
</ion-card-content>
<ion-row>
<ion-col> <button ion- button icon- left clear small>
<ion-icon name= \"thumbs-down\" > </ion-icon>
<div > Report < /div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
1h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
If you want to read variables from ts code. 如果要从ts代码读取变量。 Use {{}} 采用 {{}}
fe FE
{{Post Body}} {{Post Body}}
i can show you an example code from my project I read some soccer scorings from the server 我可以向您展示我项目中的示例代码,我从服务器上读取了一些足球得分
<ion-card *ngFor="let item of data">
<ion-card-content>
<div style="text-align: center">
<p>{{item.HomeTeam}}</p>
<p> <strong>{{item.HomeGoals}}:{{item.AwayGoals}}</strong> </p>
<p>{{item.Away}}</p>
</ion-card-content>
</ion-card>
TS: i load the api and get back a json TS:我加载了api并返回了一个json
ionViewDidLoad() {
console.log("Standings Load", this.team)
this._api.getData()
.subscribe(d => this.data = d)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.