Ionic 5将http数据传递给模态

Question

我今天发布这篇文章是因为我的 ionic 应用程序有问题。
就是这样，我通过 API (NewsAPI) 获得最新消息。 http 请求返回一个包含 20 篇文章的 arrey，我用 *ngFor='let article of article' 将这些文章显示在卡片中。
当我们点击这些卡片时，会打开一个模式。我想在打开的模态中传递文章的数据。
你知道这怎么可能吗？由于http请求返回的不是单篇文章的数据，而是20篇的数据。
例如，我无法弄清楚如何从第 4 篇文章中获取数据并将其传递给这篇文章的 modal。
提前感谢您的帮助。真诚的朱尔斯。

包含 20 篇文章的主页.html：

<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> 

主页.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();
  }
}

模态页面.ts：

export class ArticlePagePage implements OnInit {

  @Input() article;

  constructor(public modalCtrl: ModalController) {
  }

  ngOnInit() {
  }

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

}

Answer 1

一个选项可以是在触摸文章时调用 openArticle 函数，然后在函数内部调用另一个返回文章详细信息的函数，如下所示：

    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
      }

然后在modal上获取文章详情：

@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
    });
  }

}

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