如何使用ng-repeat访问数组中的Object?

时间:2017-03-25 01:24:52

标签: arrays html5 angular typescript ionic2

我使用ng-repeat时遇到问题。我正在使用带有TypeScript和HTML5的Ionic 2。我创建了一个对象数组,我需要访问它的属性。它说“无法读取属性c.getAttribute of undefined”,但是当我试图访问这些属性而不使用ng-repeat(只需键入array [0] .getAttribute)时,一切正常。 这是我的代码:

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

这是我的打字稿:

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

我不知道,如果问题出在数组中,但只有array.push为我的数组初始化工作。请问,你有什么想法,应该是什么问题。 TypeScript和angular对我来说是新的,谢谢。

2 个答案:

答案 0 :(得分:1)

  

如何对访问对象的在阵列-使用-NG重复

你不能。 | filterA | filterB | filterC | filterD是angularjs(版本1)语法。 Ionic 2建立在 angular 2 之上。

模板中for循环的格式为:

ng-repeat

文档ngFor

答案 1 :(得分:0)

我不是100%肯定,但是在你的函数调用后你不需要括号吗?

而不是{{c.getExpiration}},您应该使用{{c.getExpiration()}}