角2個通過數據轉換成一個for循環

Question

組件：

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() { 
    } 

} 

組件部分集中在：

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> 

我需要替換的"Back Squat"串組件與ngModel chartFilter，但我不知道如何去傳遞一個動態變化的值爲一個for循環。無論何時通過菜單<select>選擇新項目，該值都會更改。

Answer 1

更新

您應該使用[ngValue]如下，

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

更新1：基於聊天

如果你想明確地處理該事件時，下拉改變你應該使用ngModelChange()事件如下，

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

打字稿代碼：

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

} 

注意：更新的演示相應

LIVE DEMO

Answer 2

我覺得有點難以理解。基本上你想for循環運行此每當在選擇的值發生變化，但隨後而不是把這些代碼在構造函數部分，你爲什麼不使用ngModelChange和一個函數分配給它，就像提到@aravind。