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

我发现它有点难以理解。基本上，只要select中的值发生变化，你就想运行这个for循环，但是然后不要将那些代码放在构造函数部分中，为什么不使用ngModelChange并为它分配一个函数，就像@aravind提到的那样。

Angular 2将数据传递给for循环

2 个答案: