0

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.

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

1 Comment

no problem..:) check the angular 2 docs for syntax..and mark as solved since it worked

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.