Angular 2 Weitergabe von Daten in einer for-Schleife

Question

Komponente:

import { Component, OnInit, Input } from '@angular/core'; 
import * as _ from "lodash"; 

import { AF } from '../angularfire.service'; 

@Component({ 
    selector: 'app-record-chart', 
    templateUrl: './record-chart.component.html', 
    styleUrls: ['./record-chart.component.less'] 
}) 
export class RecordChartComponent implements OnInit { 
    chartFilter = "Personal Records"; 
    // Fill Arrays 
    currentUser = []; 
    userRecords = []; 
    topRecords = []; 
    topRecordLabels = []; 
    topRecordWeights = []; 
    lineRecords = []; 
    public lineRecordWeights:Array<number[]> = []; 
    public lineRecordLabels:Array<any> = []; 
    movements = [ 
    "Back Squat", 
    "Bench Press", 
    "Clean", 
    "Clean & Jerk", 
    "Deadlift", 
    "Front Squat", 
    "Jerk", 
    "Power Clean", 
    "Power Snatch", 
    "Push Press", 
    "Snatch", 
    "Strict Press" 
    ]; 
    movementCharts = [ 
    "Personal Records", 
    "Back Squat", 
    "Bench Press", 
    "Clean", 
    "Clean & Jerk", 
    "Deadlift", 
    "Front Squat", 
    "Jerk", 
    "Power Clean", 
    "Power Snatch", 
    "Push Press", 
    "Snatch", 
    "Strict Press" 
    ]; 

    constructor(private afService: AF) { 
    // Get current user details. 
    afService.getCurrentUserInfo().then(currentUserDetails => { 
     this.currentUser.push(currentUserDetails); 
    }).then(() => { 
     // Populate lifts array 
     for(let movement of this.movements) { 
     this.afService.getRecords(movement, this.currentUser[0].userID).subscribe((data) => { 
      // Sort Arrays 
      var sortedArray = _.orderBy(data, ['weight']); 
      var sortedArray2 = _.orderBy(sortedArray,'date'); 
      this.userRecords.push(sortedArray); 

      // Filter by PR 
      var newRecords = sortedArray 
      .filter(function(record) { 
       return sortedArray.find(function(innerRecord) { 
        return innerRecord.name === record.name && innerRecord.weight > record.weight; }) === undefined; 
      }); 
      var newRecords2 = sortedArray2 
      .filter(function(record) { 
       return sortedArray2.find(function(record) { 
        return record.movement === "Back Squat"; }); 
      }); 

      // Build array of PR's 
      for (let record of newRecords) { 
      this.topRecords.push(record); 
      } 

      // Build array of PR's 
      for (let record of newRecords2) { 
      this.lineRecords.push(record); 
      } 
     }); 
     } 
    }).then(() => { 
     // Push labels and weights to chart. 
     setTimeout(() => { 
     for (let item of this.topRecords) { 
     this.topRecordLabels.push(item.movement); 
     this.topRecordWeights.push(item.weight); 
     } 
     this.topRecordLabels = this.topRecords.map((item)=> item.movement); 
     this.topRecordWeights = this.topRecords.map((item)=> item.weight); 

     for (let item of this.lineRecords) { 
     this.lineRecordLabels.push(item.date); 
     this.lineRecordWeights.push(item.weight); 
     } 
     this.lineRecordWeights = this.lineRecords.map((item)=> item.weight); 
    }, 300) 
    })} 

    ngOnInit() { 
    } 

} 

Component Abschnitt konzentriert sich auf:

var newRecords2 = sortedArray2 
      .filter(function(record) { 
       return sortedArray2.find(function(record) { 
        return record.movement === "Back Squat"; }); 
      }); 

HTML:

<div class="content-actions btn-group"> 
    <select class="form-select record-select" [(ngModel)]="chartFilter"> 
     <option *ngFor="let movement of movementCharts">{{ movement }}</option> 
    </select> 
    <button class="btn btn-primary" type="button" routerLink="/add-record">Add Record</button> 
    </div> 

Ich brauche die "Back Squat" Zeichenfolge in das ersetzen Komponente mit der ngModel chartFilter, aber ich bin mir nicht sicher, wie man einen dynamisch ändernden Wert in ein for übergeben wird Schleife. Der Wert ändert sich, wenn ein neuer Artikel über das Menü <select> ausgewählt wird.

Answer 1

Aktualisiert

Sie sollten [ngValue] wie unten verwenden,

<select [(ngModel)]="chartFilter"> 
     <option *ngFor="let type of movementCharts" [ngValue]="type"> {{type}}</option> 
     </select> 

Update 1: Basierend auf dem Chat

Wenn Sie das Ereignis explizit behandelt werden sollen, wenn der Drop-Down geändert wird, die Sie verwenden sollen ngModelChange() Ereignis wie unten,

<select [ngModel]="chartFilter" (ngModelChange)="eventHanler($event)"> 
     <option *ngFor="let type of movementCharts" [ngValue]="type"> {{type}}</option> 
     </select> 

Typoskript Code:

eventHanler(movement){ 
    //// do what ever you want 

} 

Hinweis: aktualisiert die Demo entsprechend

LIVE DEMO

Answer 2

Ich finde es ein bisschen schwer zu verstehen. Grundsätzlich möchten Sie diese for-Schleife immer dann ausführen, wenn sich der Wert in der Auswahl ändert, aber anstatt diesen Code in den Konstruktorabschnitt einzufügen, warum verwenden Sie nicht ngModelChange und weisen ihm genau wie @aravind eine Funktion zu.