Ionic / Angular: вставить данные машинописи на странице html

Question

Во-первых, извините за мой английский sh. Я француз. тогда вот моя проблема: я разрабатываю приложение, которое подсчитывает количество смертей, случаев и излеченных от коронавируса, а также число смертей индивидуально для каждой страны. Для этого я использую API-интерфейс, который отслеживает все данные.

Как показано на скриншоте № 1, у меня есть панель поиска для поиска страны в списке «ion-card» с именем стран и всех связанных с ними данных (не обращайте внимания на «количество дел, обработанных в 0», это ошибка API).

Как показано в моем коде html, у меня много карточки с названием страны и данными. Теперь моя проблема - панель поиска. Действительно, как я могу заставить ее отфильтровывать ионные карты с помощью их заголовков? У вас есть решение? Заранее спасибо:)

Снимок экрана моего приложения: Снимок экрана моего приложения

Le-код HTML:

  <ion-content [fullscreen]="true">

<ion-searchbar animated placeholder="Rechercher un pays"></ion-searchbar>
<ion-list>
<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">France :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatafr.cases }} <br>
    Nombre de cas soignés : {{ covidDatafr.recovered }} <br>
    Nombre de décès : {{ covidDatafr.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Etats-Unis :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatausa.cases }} <br>
    Nombre de cas soignés : {{ covidDatausa.recovered }} <br>
    Nombre de décès : {{ covidDatausa.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Italie :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDataitaly.cases }} <br>
    Nombre de cas soignés : {{ covidDataitaly.recovered }} <br>
    Nombre de décès : {{ covidDataitaly.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Chine :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatachine.cases }} <br>
    Nombre de cas soignés : {{ covidDatachine.recovered }} <br>
    Nombre de décès : {{ covidDatachine.deaths }} <br>
  </ion-card-content>
</ion-card>

  <ion-card class="global_card">
    <ion-card-header>
      <ion-card-title color="light">Australie :</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      Nombre de cas connus : {{ covidDataaustralie.cases }} <br>
      Nombre de cas soignés : {{ covidDataaustralie.recovered }} <br>
      Nombre de décès : {{ covidDataaustralie.deaths }} <br>
    </ion-card-content>
  </ion-card>

  <ion-card class="global_card">
    <ion-card-header>
      <ion-card-title color="light">Belgique :</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      Nombre de cas connus : {{ covidDatabelgique.cases }} <br>
      Nombre de cas soignés : {{ covidDatabelgique.recovered }} <br>
      Nombre de décès : {{ covidDatabelgique.deaths }} <br>
    </ion-card-content>
  </ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Brésil :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatabresil.cases }} <br>
    Nombre de cas soignés : {{ covidDatabresil.recovered }} <br>
    Nombre de décès : {{ covidDatabresil.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Canada :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatacanada.cases }} <br>
    Nombre de cas soignés : {{ covidDatacanada.recovered }} <br>
    Nombre de décès : {{ covidDatacanada.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Cameroun :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatacameroun.cases }} <br>
    Nombre de cas soignés : {{ covidDatacameroun.recovered }} <br>
    Nombre de décès : {{ covidDatacameroun.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Colombie :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatacolombie.cases }} <br>
    Nombre de cas soignés : {{ covidDatacolombie.recovered }} <br>
    Nombre de décès : {{ covidDatacolombie.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Finlande :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatafinlande.cases }} <br>
    Nombre de cas soignés : {{ covidDatafinlande.recovered }} <br>
    Nombre de décès : {{ covidDatafinlande.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Allemagne :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDataallemagne.cases }} <br>
    Nombre de cas soignés : {{ covidDataallemagne.recovered }} <br>
    Nombre de décès : {{ covidDataallemagne.deaths }} <br>
  </ion-card-content>
</ion-card>

<ion-card class="global_card">
  <ion-card-header>
    <ion-card-title color="light">Inde :</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Nombre de cas connus : {{ covidDatainde.cases }} <br>
    Nombre de cas soignés : {{ covidDatainde.recovered }} <br>
    Nombre de décès : {{ covidDatainde.deaths }} <br>
  </ion-card-content>
</ion-card>

Le машинопись:

import { Component, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IonContent } from '@ionic/angular';


@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
  @ViewChild(IonContent, {static: true}) content: IonContent;

  apiUrl = '';
  urlLocation= {
    france: 'FR',
    usa: 'US',
    italy: 'IT',
    chine: 'CN',
    australie: 'AU',
    belgique: 'BE',
    bresil: 'BR',
    canada: 'CA',
    cameroun: 'CM',
    colombie: 'CO',
    finlande: 'FI',
    allemagne: 'DE',
    inde: 'IN'
  };
  covidDatafr = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatausa = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDataitaly = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatachine = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDataaustralie = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatabelgique = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatabresil = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatacanada = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatacameroun = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatacolombie = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatafinlande = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDataallemagne = {
    cases: '',
    deaths: '',
    recovered: ''
  };
  covidDatainde = {
    cases: '',
    deaths: '',
    recovered: ''
  };


  constructor(public http: HttpClient) {
    this.readAPIfr('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatafr.cases = data['latest']['confirmed'];
      this.covidDatafr.deaths = data['latest']['deaths'];
      this.covidDatafr.recovered = data['latest']['recovered'];
    });

    this.readAPIus('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatausa.cases = data['latest']['confirmed'];
      this.covidDatausa.deaths = data['latest']['deaths'];
      this.covidDatausa.recovered = data['latest']['recovered'];
    });

    this.readAPIitaly('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDataitaly.cases = data['latest']['confirmed'];
      this.covidDataitaly.deaths = data['latest']['deaths'];
      this.covidDataitaly.recovered = data['latest']['recovered'];
    });

    this.readAPIchine('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatachine.cases = data['latest']['confirmed'];
      this.covidDatachine.deaths = data['latest']['deaths'];
      this.covidDatachine.recovered = data['latest']['recovered'];
    });

    this.readAPIaustralie('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDataaustralie.cases = data['latest']['confirmed'];
      this.covidDataaustralie.deaths = data['latest']['deaths'];
      this.covidDataaustralie.recovered = data['latest']['recovered'];
    });

    this.readAPIbelgique('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatabelgique.cases = data['latest']['confirmed'];
      this.covidDatabelgique.deaths = data['latest']['deaths'];
      this.covidDatabelgique.recovered = data['latest']['recovered'];
    });

    this.readAPIbresil('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatabresil.cases = data['latest']['confirmed'];
      this.covidDatabresil.deaths = data['latest']['deaths'];
      this.covidDatabresil.recovered = data['latest']['recovered'];
    });

    this.readAPIcanada('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatacanada.cases = data['latest']['confirmed'];
      this.covidDatacanada.deaths = data['latest']['deaths'];
      this.covidDatacanada.recovered = data['latest']['recovered'];
    });

    this.readAPIcameroun('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatacameroun.cases = data['latest']['confirmed'];
      this.covidDatacameroun.deaths = data['latest']['deaths'];
      this.covidDatacameroun.recovered = data['latest']['recovered'];
    });

    this.readAPIcolombie('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatacolombie.cases = data['latest']['confirmed'];
      this.covidDatacolombie.deaths = data['latest']['deaths'];
      this.covidDatacolombie.recovered = data['latest']['recovered'];
    });

    this.readAPIfinlande('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatafinlande.cases = data['latest']['confirmed'];
      this.covidDatafinlande.deaths = data['latest']['deaths'];
      this.covidDatafinlande.recovered = data['latest']['recovered'];
    });

    this.readAPIinde('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDatainde.cases = data['latest']['confirmed'];
      this.covidDatainde.deaths = data['latest']['deaths'];
      this.covidDatainde.recovered = data['latest']['recovered'];
    });

    this.readAPIallemagne('https://coronavirus-tracker-api.herokuapp.com/v2/locations?country_code=')
    .subscribe((data) => {
      this.covidDataallemagne.cases = data['latest']['confirmed'];
      this.covidDataallemagne.deaths = data['latest']['deaths'];
      this.covidDataallemagne.recovered = data['latest']['recovered'];
    });
  }

  readAPIfr(URL: string){
    return this.http.get(URL+this.urlLocation.france);
  }

  readAPIus(URL: string){
    return this.http.get(URL+this.urlLocation.usa);
  }

  readAPIitaly(URL: string){
    return this.http.get(URL+this.urlLocation.italy);
  }

  readAPIchine(URL: string){
    return this.http.get(URL+this.urlLocation.chine);
  }

  readAPIaustralie(URL: string){
    return this.http.get(URL+this.urlLocation.australie);
  }

  readAPIbelgique(URL: string){
    return this.http.get(URL+this.urlLocation.belgique);
  }

  readAPIbresil(URL: string){
    return this.http.get(URL+this.urlLocation.bresil);
  }

  readAPIcanada(URL: string){
    return this.http.get(URL+this.urlLocation.canada);
  }

  readAPIcameroun(URL: string){
    return this.http.get(URL+this.urlLocation.cameroun);
  }

  readAPIcolombie(URL: string){
    return this.http.get(URL+this.urlLocation.colombie);
  }

  readAPIfinlande(URL: string){
    return this.http.get(URL+this.urlLocation.finlande);
  }

  readAPIallemagne(URL: string){
    return this.http.get(URL+this.urlLocation.allemagne);
  }

  readAPIinde(URL: string){
    return this.http.get(URL+this.urlLocation.inde);
  }


  ScrollToTop(){
    this.content.scrollToTop(1500);
  }

}

Answer 1

Отображение ваших машинописных данных с помощью строковой интерполяции, что-то вроде:

<ion-card-content>
    <!-- number of deaths of a country -->
    {{covidDatausa.deaths}}
    <!-- number of recovered of a country -->
    {{covidDatausa.recovered}}
    <!-- number of cases of a country -->
    {{covidDatausa.cases}}
</ion-card-content>

Это будет утомительно для всех стран, поэтому вы должны рассмотреть возможность помещения разных стран в массив, например:

[{
    country:"us"
    recovered: 12,
    cases:100,
    deaths:0
 },{
    country:"italy"
    recovered: 12,
    cases:100,
    deaths:0
 }]

Затем вы можете использовать ngFor l oop в машинописном тексте и отобразить все элементы в одном go, ссылка для ngFor: https://angular.io/api/common/NgForOf