Ionic 5 将 http 数据传递给模态

Question

我今天做这个 post 因为我的离子应用有问题。
就是这样，我通过 API (NewsAPI) 获取最新消息。 http 请求 return 是一个包含 20 篇文章的数组，我使用 *ngFor='let article of articles' 在卡片中显示这些文章。
当我们点击这些卡片时，会打开一个模式。我想在打开的模式中传递文章的数据。
你知道这怎么可能吗？由于http请求的不是return单篇文章的数据，而是20篇文章的数据。
例如，我不知道如何从第 4 篇文章中获取数据并将其传递到本文的模态中。
提前感谢您的帮助。此致朱尔斯。

主要 page.html 与 20 篇文章:

<ion-card *ngFor='let article of articles; let i = index' (click)="openArticle(i)">
    <img [src]='article.urlToImage'/>
    <ion-card-header>
      <ion-card-subtitle>{{ article.author }}</ion-card-subtitle>
      <ion-card-title>{{ article.title }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      {{ article.description }}  
    </ion-card-content>
 </ion-card>

主要 page.ts :

export class HomePage {
  searchText = '';
  newsApiUrl = '';
  articles: any = [];

  page = 1;

  constructor(private route: Router, public http: HttpClient, public alertController: AlertController, public toastController: ToastController, public modalController: ModalController) {
    this.topNews();
  }

  readAPI(URL: string) {
    return this.http.get(URL)
  }

  topNews() {
    this.newsApiUrl = 'https://newsapi.org/v2/top-headlines?country=fr&page=' + this.page.toString() + '&apiKey=MYAPI'
    this.readAPI(this.newsApiUrl)
    .subscribe((data) => {
      this.articles = data['articles'];
      console.log(this.articles);
      if(this.articles.length == 0){
        this.page--;
        this.topNews();
        this.noMorePageToast();
      }
    });
  }

  async getArticleDetails(id) {
    let article = null;
    this.newsApiUrl = 'https://newsapi.org/v2/top-headlines?country=fr&page=' + this.page.toString() + '&apiKey=MYAPI'
    this.readAPI(this.newsApiUrl)
    .subscribe((data) => {
      article =  data['articles'][id]
    });
    return article;
  }

  async openArticle(id) {
    console.log('article n°'+id);
    const articleDetails = this.getArticleDetails(id);
    console.log(articleDetails); // Console : [object Promise]

    const modal = await this.modalController.create({
      component: ArticlePagePage,
      componentProps: {   
        article: articleDetails    
      },
      mode: 'ios',
      swipeToClose: true
      // cssClass: 'article-page'
    });
    return await modal.present();
  }
}

模态 page.ts :

export class ArticlePagePage implements OnInit {

  @Input() article;

  constructor(public modalCtrl: ModalController) {
  }

  ngOnInit() {
  }

  dismiss() {
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

}

Answer 1

一个选项可以是在触摸文章时调用 openArticle 函数，然后在函数内部调用另一个函数，returns 文章详述如下：

    async openArticle() {

        // Call to another function that returns article details
        const articleDetails = getArticledetails(id);

        const modal = await this.modalController.create({
          component: ArticlePagePage,
          componentProps: {
            article: articleDetails 
          },
          mode: 'ios',
          swipeToClose: true
          // cssClass: 'article-page'
        });
        return await modal.present();
      }


     async getArticleDetails(id){
       // Call to the API and returns the article details
      }

然后在模式中获取文章详细信息：

@Component({
  selector: 'app-article-page',
  templateUrl: './article-page.page.html',
  styleUrls: ['./article-page.page.scss'],
})
export class ArticlePagePage implements OnInit {

  @Input() article // This is the article you passed before open the modal

  constructor(public modalCtrl: ModalController) {
  }

  ngOnInit() {
  }

  dismiss() {
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

}

如果这能解决您的问题，请告诉我。

Ionic 5 将 http 数据传递给模态

Ionic 5 passing http data to modal

httprequest

typescript

ionic-framework

angular