如何将JSON数据传递到Angular的数组

Question

我想将我从API获得的JSON数据传递到数组中，并在模板中显示该信息，但我不知道该怎么做。

此错误在我的控制台上示意：

我的TS文件：

this.api.getJoursFeries(year).subscribe(
      (data: feries[]) => {
        this.joursFeries = data;
        // console.log(data);
      }, (error: HttpErrorResponse) => {
        console.log(error);
      }
)

我的服务文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { feries } from '../models/feries';

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

  private apiBaseUrl = 'https://calendrier.api.gouv.fr/jours-feries/metropole'

  constructor(private http: HttpClient) { }

  getJoursFeries(annee : number): Observable<feries[]> {
    return this.http.get<feries[]>(`${this.apiBaseUrl}/${annee}.json`);
  }
}

Answer 1

假设您已经定义了一个表示响应中给出的对象的接口，则有两种方法可以在模板中表示该数据。

最简单的方法是从订阅中分配从组件到数组响应的数组变量，然后在模板中使用 *ngfor Directive显示数据的

   //ts file
import { Component } from '@angular/core';
import {ApiService} from 'path/to/service'
import {Feries} from 'path/to/feriesModel'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'myClass';

  joursFeries: Feries[] = []

  constructor(private apiService: ApiService) {
  }

  ngOnInit() {
    apiService.getJoursFeries().subscribe(data => {
      this.joursFeries = data;
    })

  }
}

//html file

<div *ngFor="let ferie of joursFeries">
    <p>{{ferie.name}}</p>
  </div>

更有原则性的方法是在您的服务中创建一个extiviourSubject，然后将其转换为转换通过.asobservable（）可观察到
将此服务分配到可观察到的组件中的可观察变量。但是，这需要对RXJS库的一些了解以及如何与可观察到的适当合作。
让我知道您是否需要解决方案的更多详细信息

Answer 2

https://calendrier.api.api.gouv.fr/ JORS-FERIES/METROPOLE/2021.JSON 不是数组，而是具有不同键值对的JavaScript对象。

{
     "2021-01-01": "1er janvier",
     "2021-04-05": "Lundi de Pâques",
     "2021-05-01": "1er mai",
     "2021-05-08": "8 mai",
     "2021-05-13": "Ascension",
     "2021-05-24": "Lundi de Pentecôte",
     "2021-07-14": "14 juillet",
     "2021-08-15": "Assomption",
     "2021-11-01": "Toussaint",
     "2021-11-11": "11 novembre",
     "2021-12-25": "Jour de Noël" 
}

在您的服务中，您需要将JSON对象（从服务器）映射到数组（您可以与 *ngfor一起使用）。

假设Feries被定义为：

type feries = {
  fDate: string;
  fName: string;
};

然后在您的服务中您可以更改将数据输入的代码：

getJoursFeries(annee: number): Observable<feries[]> {
    return this.http.get<any>(`${this.apiBaseUrl}/${annee}.json`).pipe(
      map((val) => {
        let feriesList: feries[] = [];
        for (var key of Object.keys(val)) {
          feriesList.push({ fDate: key, fName: val[key] });
        }
        return feriesList;
      })
    );
  }

您可以共享Feries类型吗？然后，我可以正确更新答案。