代码之家  ›  专栏  ›  技术社区  ›  navylover

动态更改离子图标的文本

  •  0
  • navylover  · 技术社区  · 6 年前

    如果我只是想展示 post.date ,我下面的代码已经成功了。

    .ts代码:

    posts: any;
    
    constructor(public http: Http, public navCtrl: NavController, public navParams: NavParams, private viewCtrl: ViewController, private appCtrl: App) {
        this.http.get('http://example.com/GetData').map(res => res.json()).subscribe(data => {
          this.posts = data.caseApiList;
          console.log(this.posts);
        },
          err => {
            console.log("Oops!");
          });
      }
    

    HTML :

    <ion-content padding>
      <ion-list>
        <ion-item *ngFor="let post of posts">
          <img [src]="post.caseAuthorImage" (load)="post.loaded = true" [hidden]="!post.loaded" />
          <img [src]="post.authorPortrait" [hidden]="post.loaded" />
          <h2 (click)="navigate(post.caseId)">{{post.title}}</h2>
    
          <div class="demo">
            <span style="width: 33%; text-align: center;">
              <ion-icon name="text"></ion-icon>
              {{post.hot}}
            </span>
            <span style="width: 33%; text-align: center;">
              <ion-icon name="text"></ion-icon>
              {{post.tag}}
            </span>
            <span style="width: 33%; text-align: center;">
              {{post.date}} //I want to get the interval between post.date and today
            </span>
          </div>
        </ion-item>
      </ion-list>
    </ion-content>
    

    但现在我想展示 邮递日期 今天。我尝试添加一个函数,例如:

    showPublishDate(publishDate: string): string {
        return publishDate + "days ago";
      }
    

    但是我该如何使用这个函数呢?

    1 回复  |  直到 6 年前
        1
  •  1
  •   sridhar..    6 年前

    看看这个

    <span style="width: 33%; text-align: center;">
              {{showPublishDate(post.date)}} //I want to get the interval between post.date and today
            </span>
     
    
    showPublishDate(publishDate: string): string {
    return Math.ceil((new Date() - new Date(publishDate))/86400 * 1000) + "days ago";
      }