Загрузите текстовый файл и присвойте текст в виде строки переменной - Angular 7

Question

У меня есть ответ API, который содержит внутри ссылку на сохраненный текстовый файл в облаке. Я хочу загрузить текстовый файл и использовать текст в виде строки внутри моего приложения Angular.
Это то, что я сделал до сих пор (не так много)

getTextDetails(resultId: string) {
    this.http.get(TEXT_DETAILS_URL + resultId).subscribe((res: any) => {
        this.saveTextFile(res.textFile);
    });
}


// The data is a link to the text file!!
saveTextFile(data) {
    const blob = new Blob([data], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
}

Любая помощь будет оценена.

[редактировать]

Спасибо за вашу помощь, я не знал, что это так просто. Теперь у меня есть небольшая проблема:

SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad

Answer 1

Насколько я понимаю, есть два вызова API.Первый вызов API возвращает путь к текстовому файлу.Вы используете этот путь, чтобы сделать еще один вызов API для получения фактического содержимого файла.

Пожалуйста, исправьте, если мое понимание неверно.

Если мое понимание верно, попробуйте:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getFileData()
      .subscribe(response => console.log(response));
  }

  getFileData() {
    return this.http.get('/assets/filePath.json')
      .pipe(
        switchMap((response: any) => this.http.get(response.pathToFile, {
          responseType: 'text'
        }))
      );
  }

}

---

ПРИМЕЧАНИЕ: Понимаете, я использую ответ из локально размещенного файла JSON, который снова указывает на локально размещенный текстовый файл.Кроме того, вам нужно будет указать responseType для второго вызова API как text.

---

Вот Рабочий пример StackBlitz для вашей ссылки.

Answer 2

Для того, чтобы получить текстовый файл. Вы можете сделать:

text: string;    

getTextDetails(resultId: string) {
        this.http.get(TEXT_DETAILS_URL + resultId).subscribe((res: any) => {
            //Now get the text from url.
            this.http.get(res.textFile).subscribe(text: any) {
              this.text = text;
            }
        });
    }

Теперь вы можете отобразить этот текст в HTML-шаблон.

<p ngIf*="text"> {{ text }} </p>