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で使用する値の配列を作成する必要があります*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を使用してバインドするだけです。 ハッキングがあるかもしれませんが、通常Angularsの変化の検出には問題があり、コンポーネントのパフォーマンスが大幅に低下します。