javascript - Angular 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>

typescript 代码:

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

}

注意:相应地更新了演示

LIVE DEMO