2017-05-28 14 views
0

私はサーバーからいくつかの投稿を読んで、最新の投稿を画面にカードとして表示しようとするシンプルなアプリケーションを構築しています。私はまだ非常に初期段階にあり、内容とヘッダが変更されたイオンカード要素をタイプコピーで追加する方法をテストしていますか?私の現在のコードはTHSのようなものです:変更する値を持つイオンカードをプログラムでtypescriptに追加するには?

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>"; 

    } 



} 

と私のHTMLファイルに:

<div [innerHTML]="postContainer"> 
</div> 

物事をテストするようfillPost()関数を呼び出しボタンがありますが、結果は次のようになります。

http://imgur.com/a/z5XyW

私と感謝を助けてください。

答えて

1

ionicでは、tsファイルのforループをhtmlで行うのは一般的ではありません。 あなたは、TSコードから変数を読みたい場合は、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> 

に直接* ngForを使用することができます。 {{}}を使用します。

f.e.

{{ポストボディ}}

私はあなたに私のプロジェクト からのサンプルコードを表示することができます私は、サーバー

<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からいくつかのサッカーのscorings読み:私はAPIをロードし、取り戻す をjson

ionViewDidLoad() { 
    console.log("Standings Load", this.team) 
    this._api.getData() 
    .subscribe(d => this.data = d) 
+0

ありがとう、あなたは私の日=を保存しました。 – Nitro

関連する問題