TypeError: Cannot read property 'title' of undefined at Object.eval [as updateRenderer]

Ionic Framework ionic-v3
1

Hello Ionic World,

I’m trying to pull in a CPT from my Wordpress site and everything is perfect except when I’m pulling in the details for the title. I tried to use {{ alert?.title }} but nothing is displayed, any help would be appreciate. Here is my code below:

alerts.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ApiProvider } from "../../providers/api/api";
import { AlertsDetailsPage } from "../alerts-details/alerts-details";

@IonicPage()
@Component({
  selector: 'page-alerts',
  templateUrl: 'alerts.html',
})
export class AlertsPage {

  public alerts: any = [];
  constructor(public navCtrl: NavController, public navParams: NavParams, public api: ApiProvider) {
    this.getAlerts();
  }

  getAlerts() {
    this.api.get('alerts?_embed').subscribe((data) => {
      this.alerts = data;
    });
  }

  openDetail(alert) {
    this.navCtrl.push(AlertsDetailsPage, { alert: alert });
  }

}

alerts.html


<ion-card *ngFor="let alert of alerts" (click)="openDetail(post)">
  
  <ion-card-content>
    <ion-card-title>
      {{ alert.title.rendered }}

      <p>
        {{ alert.date | date: "EEEE, MMMM d, y" }}
      </p>

    </ion-card-title>
  </ion-card-content>
</ion-card>


</ion-content>

alerts-details.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-alerts-details',
  templateUrl: 'alerts-details.html',
})
export class AlertsDetailsPage {

  public alert: any = [];
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.alert = navParams.get('alert');
  }

}

alerts-details.html


<ion-header no-shaddow no-border>
  <ion-navbar>
    <ion-title>{{ alert.title.rendered }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <p>
    {{ alert.date | date: "EEEE, MMMM d, y" }}
  </p>

  <h3>
    {{ alert.title.rendered }}
  </h3>

  <p [innerHtml]="alert.content.rendered">

  </p>

</ion-content>