목록 보기에서 API 결과를 보여주는 Ionic

오늘 저는 Ionic을 다시 확인하고 API 호출을 수행하고 결과를 목록으로 보여주고 싶었습니다.

이것은 Ionic에서 매우 일반적인 사용 사례입니다. API 엔드포인트를 호출하고 결과 목록을 다시 가져오려고 합니다.

사용자는 종종 이러한 항목을 클릭하고 세부 정보 페이지를 볼 수 있습니다. 이 예에서는 지금은 목록을 표시하는 데 집중할 것입니다.

최종 결과는 다음과 같습니다.

이온 시작점

얼마 전에 우리는 작업할 템플릿으로 사용할 기본 Ionic 앱을 만들었습니다.

getting started with Ionic에 관심이 있으시면 이 문서를 따르십시오.

You can download the starting template from GitHub.

목록 구성 요소 만들기

기본 탭을 사용하여 목록을 만들 것입니다.tab1.page.html를 열고 다음 HTML을 삽입합니다.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Tab 1 </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-label>
        <h2>cerulean</h2>
        <h3>#98B2D1</h3>
        <p>2000</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

이것을 렌더링하면 다음과 같이 보일 것입니다.



이제 API 호출을 수행하여 이를 동적으로 만들 것입니다!

API 호출 추가

이제 그의 목록을 채우기 위해 일부 데이터를 가져올 수 있도록 API를 추가해 보겠습니다.

먼저 HttpClientModule 에서 app.module.ts 를 활성화합시다.

imports: [
    // Other imports
    HttpClientModule,
],

이제 tab1.page.ts가 있으면 loadData 함수를 만들어 봅시다.

loadData(event = null) {
    this.http
    .get<{ data: any[] }>(`https://reqres.in/api/unknown`)
    .subscribe((resp: { data: any }) => {
      this.data = resp.data;
    });
}

이것은 API를 호출하고 이 구성 요소의 데이터를 response.data 개체로 설정합니다.

나머지 구성 요소는 다음과 같습니다.

data: any[] = [];

constructor(private http: HttpClient) {}

ionViewWillEnter() {
    this.data = [];
    this.loadData();
}

이제 실제tab1.page.html를 수정해 보겠습니다.

<ion-list>
    <ion-item *ngFor="let item of data">
      <ion-label>
        <h2>{{ item.name }}</h2>
        <h3>{{ item.color }}</h3>
        <p>{{ item.year }}</p>
      </ion-label>
    </ion-item>
</ion-list>

이것을 실행하면 다음과 같이 보일 것입니다.



자, 정말 멋져요!

GitHub에서 이 프로젝트를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나