在Angular 4中，可以使用RxJS的debounceTime操作符来解决http重复调用问题。debounceTime操作符会延迟发送http请求，直到一定的时间间隔内没有新的请求被发送。

下面是一个示例代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'app-example',
  template: `
    Call API
  `
})
export class ExampleComponent {
  private apiSubject = new Subject();

  constructor(private http: HttpClient) {
    this.apiSubject
      .debounceTime(500) // 设置延迟时间为500ms
      .subscribe(() => {
        this.http.get('https://api.example.com/data')
          .subscribe(response => {
            console.log(response);
          });
      });
  }

  callApi() {
    this.apiSubject.next();
  }
}

在上面的示例中，我们创建了一个apiSubject作为http请求的主体，然后使用debounceTime操作符将其延迟500ms。当用户点击"Call API"按钮时，我们调用callApi方法来触发http请求。由于使用了debounceTime，如果在500ms内再次调用callApi方法，http请求将被忽略，直到没有新的请求被发送。这样就可以避免重复调用http请求。