如何将 ionic 4 html 文件中的 i=index 值传递到 .ts 文件中以便在方法中使用？

Question

我有一个 *ngFor，它使用 let i=index 并按预期工作索引数组。

html

  <div *ngFor="let fromItem of listResults let i=index;">
    <ion-item  (click)="openSubsetPage( i )" detail>
      <ion-label>{{fromItem.Name}}</ion-label>
      <ion-badge color="light">{{filter}} / {{listNumber[i].Questions.length}}</ion-badge>
    </ion-item>
  </div>

我想要完成的是使用我的 html 文件中的 [i]，在我的 .ts 文件中的第 5 行 this.filter。我想用 [i] 替换 [0]。我不确定我该怎么做。

.ts

GetList(){
  this.storage.get(this.value).then((val) => {
    this.listResults = JSON.parse(val);
    this.listNumber = this.listResults;
    this.filter = this.listNumber[0].Questions.filter((c: { input: any; }) => !!c.input).length;
  });
}

Answer 1

如果要在加载视图之前计算过滤器值，则必须创建另一个数组 filter[] 并存储计算出的值。

let filter[];

GetList() {
  this.storage.get(this.value).then((val) => {
    this.listResults = JSON.parse(val);
    this.listNumber = this.listResults;

    this.listNumber.forEach((item, index) => {
      this.filter[index] = this.listNumber[index].Questions
        .filter((c: { input: any }) => !!c.input).length;
      });
    });
  }
}

并在模板中用作

<ion-badge color="light"> {{ filter[i] }} / {{listNumber[i].Questions.length}}</ion-badge>

另一种方法是创建一个方法来计算给定索引处列表项的此过滤器值。

getFilter(index) {
  return this.listNumber[index].Questions.filter((c: { input: any }) => !!c.input).length;
}

并在模板中使用它作为

<ion-badge color="light"> {{ getFilter(i) }} / {{listNumber[i].Questions.length}}</ion-badge>

如何将 ionic 4 html 文件中的 i=index 值传递到 .ts 文件中以便在方法中使用？

How do I pass i=index value from an ionic 4 html file into the .ts file for use in a method?

typescript

ionic4