angular实现http响应一个字一个字输出

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let letter of responseLetters">{{ letter }}</div>
  `,
})
export class AppComponent {
  responseLetters: string[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('http://example.com/api/response').subscribe((response: string) => {
      const letters = response.split('');
      let index = 0;
      const intervalId = setInterval(() => {
        this.responseLetters.push(letters[index]);
        index++;
        if (index === letters.length) {
          clearInterval(intervalId);
        }
      }, 1000);
    });
  }
}

方法二

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { concatMap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: '<button (click)="fetchData()">Fetch Data</button>',
})
export class AppComponent {
  constructor(private http: HttpClient) { }

  fetchData() {
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
    this.http.get(url, { responseType: 'text' }).pipe(
      concatMap(response => response.split(''))
    ).subscribe(character => console.log(character));
  }
}

注意，这里使用了 responseType: 'text' 来指定响应类型为文本，以便能够对响应体进行逐个字符的处理。concatMap 操作符可以将响应体中的字符串拆分成单个字符并逐个输出。