如何在 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本身。可能会有黑客攻击，但它们通常与 Angular 更改检测配合不佳，并且可能会严重损害您的组件性能。