如何在Ionic 3中进行非移位时将fadeIn动画添加到列表中?

时间:2017-07-06 08:07:07

标签: angular typescript ionic-framework

我是一个用户可以发布更新并成功提交到服务器的表单,我想将该项目推送到其下方的列表中。我知道如何在Jquery和vanilla js中做到这一点,但不知道哪里可以从Angular 4开始。希望有人可以帮助我。

组件文件

<form (ngSubmit)="postStatus()">
  <ion-item>

        <ion-label>Post Update</ion-label>
  </ion-item>

  <ion-item>
    <ion-textarea [(ngModel)]="update" name="update"></ion-textarea>
  </ion-item>
<ion-grid>
<ion-row>
<ion-col col-6>
  <button item-right ion-button color="secondary" small type="submit" block>Submit</button>
</ion-col>
</ion-row>
</ion-grid>

</form>


<ion-content>
<ion-card *ngFor="let p of posts">

  <ion-item>
    <h2 (click)="pushPage(p)">{{ p.user.name }}</h2>
    <p>{{p.created_at  }}</p>
  </ion-item>

  <ion-card-content>
    <p>{{ p.content }}</p>
  </ion-card-content>

</ion-card>
</ion-content>

打字稿

  postStatus(){

    this.httpService.post(this.config.apiUrl+"status",{
      update: this.update
    }).map(
      data => data.json()
    ).subscribe(

      data => {
       this.posts.unshift({
         content:data.content,
         user:data.user,
         created_at:data.created_at,
       });
      },

      error => {
          let alert = this.alertCtrl.create({
            title: 'Error!',
            subTitle: 'Some error occurred. Please try again',
            buttons: ['OK']
          });
          alert.present()
      });

  }

0 个答案:

没有答案