Angular 2 HTTP响应动画

Question

我想在客户端收到HTTP响应后运行jQuery动画。

我的Web服务是使用AngularJS的Http功能的简单Web服务：

import {Component, View, Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {JsonObj} from './JsonObj.class';
@Injectable()
export class WebService {
    private http: Http;

constructor(http: Http) {
    this.http = http;
}

get(url: string) {
    return this.http.get(url)
        // Call map on the response observable to get the parsed people object
        .map(res => {
            let _d = res.json();
            return new JsonObj(_d.code, _d.status, _d.data, _d.error);
        });
    }
}

JsonObj，这只是一个承载Web服务中数据的对象：

export class JsonObj {
private code: Number;
private status: String;
private data: any;
private error: Array<any>;

constructor(_c: Number, _s: String, _d: Array<any>, _e: Array<any>) {
    this.code = _c;
    this.status = _s;
    this.data = _d;
    this.error = _e;
}

getCode() {
    return this.code;
}
getStatus() {
    return this.status;
}
getData() {
    return this.data;
}
getError() {
    return this.error;
}
}

进行Web服务调用的组件：

import {Component, ElementRef} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Rotate} from './Rotate.class';
import {WebService} from '../../App/js/WebService.class';

@Component({
selector: 'Reviews',
viewProviders: [HTTP_PROVIDERS],
templateUrl: 'assets/templates/reviews.template.html'
})
export class Reviews {
public review: Array<any>;
private speed = 5000;
private outElem = null;
private parentElem = null;
private interval = null;

constructor(ws: WebService, el: ElementRef) {
    console.log('Reviews');

    ws.get('assets/temp_quotes.json').subscribe(
        data => this.review = data.getData().reviews,
        err => console.log('Error getting Review feed', err.getCode(), err.getError()),
        () => {
            console.log('Successful retrieval of the Review feed', this.review);
            let rotator = new Rotate(el);
            rotator.loop();
        }
    );
}
}

模板ngFor循环遍历Web服务中的数据并将其输出：

<div class="feedback-wrapper">
    <div class="quote_overlay hide" style="display: none;"></div>
    <h4>What people have to say about us...</h4>
    <ul>
        <li *ngFor="#el of review" class="hide" style="display: none;">
            <p class="quote">{{el.quote}}</p>
            <p class="author">{{el.name}}, United Kingdom<br>Reviews.co.uk, {{el.date}}</p>
        </li>
    </ul>
    <p class="show-right"><a href="/testimonials.htm">Read all Reviews</a></p>
</div>

我的问题是，当组件调用此命令时：

let rotator = new Rotate(el);
rotator.loop();

即使已使用响应更新了dom，也未填充Web服务中的el（ElementRef）内容。 似乎rotator.loop（）的调用时间过早。 我想做一个动画，一次遍历每个列表项。 关于如何正确完成任何想法？

Answer 1

最后发生的一切都会开始播放动画

constructor(ws: WebService, el: ElementRef) {
  console.log('Reviews');
  private _initialized: boolean false;

  ws.get('assets/temp_quotes.json').subscribe(
    data => this.review = data.getData().reviews,
    err => console.log('Error getting Review feed', err.getCode(), err.getError()),
    () => {
        console.log('Successful retrieval of the Review feed', this.review);
        if(!this._initialized) {
          this._initialized = true; 
        } else {
          this.startAnimation();
        }
    });
  }

  ngAfterViewInit() {
    if(!this._initialized) {
      this._initialized = true;
    } else {
      this.startAnimation();
    }
  }
  startAnimation() {
    let rotator = new Rotate(el);
    rotator.loop();
  }
}

您还可以创建一个可观察对象，并在getData()完成时添加一个事件，并在ngAfterViewInit()添加另一个事件。 订阅可观察对象，忽略第一个事件并在第二个事件上执行startAnimation() ，然后取消订阅。 我自己不使用TS，因此很难提供代码示例。