如何在 Angular 7 对象数组中获取 YAML 文件的数据

Question

我知道如何获取 JSON 文件并将其显示在 Angular 7 的数组中，但是我在搜索的 YAML 文件中遇到了问题，我真的不知道如何在数组中获取 YAML

目前我已经尝试过了，但它会出现错误。

Service

@Injectable({
  providedIn: 'root'
})
export class getYamlDataService {

  constructor(private http: HttpClient) {
    this.getJson().subscribe(data => {
      console.log(data);
    })
  }

  public getJson(): Observable<any> {
    return this.http.get("./assets/swagger/swagger.yaml");
  }
}

Component.ts

constructor(private getYamlData: getYamlDataService) {}
ngOnInit() {
    this.getYamlData.getJson().subscribe(data => {
      console.log(data);
    });

Error

解析http://localhost:4200/assets/swagger/swagger.yaml时的Http失败

但是当我打开这个本地主机时，它会显示在浏览器的 yaml 文件中。

Answer 1

这是由于您的响应被解析为 JSON 对象而不是返回纯字符串。如果你看HttpClient.get(string)的API没有options参数，你会看到响应被观察为一个json(found here, 15th overload)

get<T>(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>

你必须指定你想要的返回类型（在这种情况下很可能是“文本”）

@Injectable({
  providedIn: 'root'
})
export class getYamlDataService {

  constructor(private http: HttpClient) {
    this.getJson().subscribe(data => {
      console.log(data);
    })
  }

  public getJson(): Observable<any> {
    return this.http.get("./assets/swagger/swagger.yaml", {
      observe: 'body',
      responseType: "text";   // This one here tells HttpClient to parse it as text, not as JSON
    });
  }
}

如果您想将该 yaml 用作 JavaScript 对象，您必须自己解析它。幸运的是，已经有像 yaml.js 这样的库可供您利用。首先，安装库npm i --save yamljs，然后像这样使用它：

import {parse} from 'yamljs';
import {map} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class getYamlDataService {

  constructor(private http: HttpClient) {
    this.getJson().subscribe(data => {
      console.log(data);
    })
  }


  public getJson(): Observable<any> {
    return this.http.get("./assets/swagger/swagger.yaml", {
      observe: 'body',
      responseType: "text"   // This one here tells HttpClient to parse it as text, not as JSON
    }).pipe(
      // Map Yaml to JavaScript Object
      map(yamlString => parse(yamlString))
    );
  }
}

这是一个有效的StackBlitz 展示了这一点。

编辑：添加了将返回的字符串解析为 JavaScript 对象的示例

Edit2：添加了 StackBlitz 示例