How to access Object in array using ng-repeat?

Question

i´m having a problem with using ng-repeat. I´m using Ionic 2 with TypeScript and HTML5. I created an array of Objects where i need to access it´s attributes. It´s saying "cannot read property c.getAttribute of undefined" but when i tried to access these attributes not using ng-repeat (just typing array[0].getAttribute), everything worked fine. Here is my code:

    <ion-list>
      <ion-item ng-repeat="c in card">
        <ion-card class="styledRow">
          <ion-item class="cardHeaderClass">
            <font size="4" style="color:#FFFFFF;">{{c.getExpiration}}</font>
            <p>Monthly student</p>
          </ion-item>
          <ion-item class="rangeSlider">
            <p style="color:white">Perm</p> 
            <ion-badge color="blue" item-right>{{c.getPermValue}}/{{c.getTotalValue}}{{c.getDayEuro}}
            </ion-badge>
          </ion-item>
          <ion-item class="rangeSlider">
            <ion-range disabled="false" min="0" max="{{c.getTotalValue}}" step="1" [(ngModel)]="c.getPermValue" color="secondary">
              <ion-icon range-left  name="close" color="danger"></ion-icon>
              <ion-icon range-right  name="checkmark-circle-outline" color="secondary"></ion-icon>
            </ion-range>
          </ion-item>
          <ion-row class="styledRow">
            <ion-col>
              <button ion-button icon-left color="#f4f4f4" clear small>
                <ion-icon name="calendar"></ion-icon>
                <div>Platnosť: {{c.getExpiration}}</div>
              </button>
            </ion-col>
          </ion-row>
          <div text-right="" class="styledRow">
            <ion-note>Refreshed: 12.3.2017
            </ion-note>
          </div>
      </ion-card>
    </ion-item>
  </ion-list>

And here is my typescript:

export class HomePage {
  card: permCard[];

  constructor(public navCtrl: NavController) {
    this.card = new Array();
    for (let i = 0; i < 2; i++){
      this.card.push(new permCard("Name","Name", 33, 40, " "+"days", "12.2.2017"));
    }
  }
}

export class permCard{
  private centerName: string;
  private permName: string;
  private permValue: number;
  private totalValue: number;
  private dayEuro: string;
  private expiration: string;

  constructor(public center_name: string, public perm_name: string, public perm_value: number, public total_value: number,
          public day_euro: string, public expiration_date: string){
    this.centerName = center_name;
    this.permName = perm_name;
    this.permValue = perm_value;
    this.totalValue = total_value;
    this.dayEuro = day_euro;
    this.expiration = expiration_date;
  }
  get getCenterName(): string {
    return this.centerName;
  }
  get getPermValue(): number {
    return this.permValue;
  }
  get getPermName(): string {
    return this.permName;
  }
  get getTotalValue(): number {
    return this.totalValue;
  }
  get getDayEuro(): string {
    return this.dayEuro;
  }
  get getExpiration(): string {
    return this.expiration;
  }
}

I don´t know, if the problem is in the array, but only the array.push worked for me for initialization of array. Please, do you have any idea, what should be the problem. TypeScript and angular is new for me, thanks.

Answer 1

how-to-access-object-in-array-using-ng-repeat

You cant. ng-repeat is angularjs (version 1) syntax. Ionic 2 is built on top of angular 2 .

The format for for loop in template is:

<ion-item *ngFor="let c of card">
        <ion-card class="styledRow">
  <!-- shortened for brevity -->
</ion-item>

Documentation ngFor

Answer 2

I am not 100% sure but don't you need parenthesis after your function call?

Instead of {{c.getExpiration}} you should use {{c.getExpiration()}}