如何在 ngFor 中创建局部变量

Question

如何获取*ngFor 中的类的快照以将时间/状态/​​人性化值保存在局部变量中？

例如，timer.remaining = timer.expires - Date.now()

<ion-card  class="timer" *ngFor="let timer of timers"> 
  <ion-card-content>
    <ion-card-title>{{timer.humanize(timer.remaining) }}</ion-card-title>
    <div class="card-subtitle">{{timer.label}}</div>
  </ion-card-content>
  <ion-note>remaining: {{timer.remaining/1000}}</ion-note>
  <button ion-button block icon-left 
    [color]="lookup[timer.state].color" 
    (click)="timerClick(timer)"
  >
    <ion-icon [name]="lookup[timer.state].icon" ></ion-icon>
    {{timer.label}}
  </button>
</ion-card>

我想在ngFor 中调用一次timer.snapshot() 以获取所有显示属性。

解决方案：

谢谢，我用管道转换了Timers，然后将其推入*ngFor

// Pipe
@Pipe({name: 'toJSON', pure: false})
export class ToJsonPipe implements PipeTransform {
  transform(value: any| Array<any>): any | Array<any> { 
    let unwrap = false;
    if (!Array.isArray(value)) {
      value = [value];
      unwrap = true;
    }
    const result = value.map( (o)=>{
      if (o && o.toJSON) return o.toJSON(); 
      else return {};
    })
    return unwrap ? result[0] : result;
  }
}



// html template
<ion-card  class="timer" *ngFor="let timer of timers | toJSON "> 

Answer 1

您应该在组件类或服务中创建要与*ngFor 一起使用的值数组，然后使用*ngFor 绑定到该数组，而不是将逻辑放入*ngFor 本身。 可能会有一些 hack，但它们通常在 Angulars 更改检测方面效果不佳，并且可能会严重损害您的组件性能。