Question

我正在尝试创建一个杠铃平板计算器，用户输入所需的总重量和杠铃重量，应用程序将显示每侧需要的重量。它现在仍然很漂亮，但我遇到了一个问题，我有点难过。在我的“磅”组件内，我试图计算每侧所需的重量。一些代码与评论：

public barWeight: string = '45';
public totalWeight: string = '';
public weight: number = 0;

public plates= [      
  { weights: 100, id: 2, value: false},
  { weights: 45, id: 3, value: true},
  { weights: 35, id: 4, value: true},
  { weights: 25, id: 5, value: true},
  { weights: 10, id: 6, value: true},
  { weights: 5, id: 7, value: true},
  { weights: 2.5, id: 8, value: true},
  { weights: 1.25, id: 9, value: false},
];

// Filters out the plate array by value, 
// which in this case are checkboxes the user can toggle. 
get selectedPlates() {  
    return this.plates
        .filter(plate => plate.value)
}

public calc() {
    this.weight = ((parseFloat(this.totalWeight) - parseFloat(this.barWeight)) / 2);
    var totalUsed = []; 
    var idsUsed = [] ;
    var exp = 1; // just used to keep track of the count
    var platesUsed = [];
    //Beginning of calculation of weights on each side
    for (let i = 0; i < this.selectedPlates.length; i += 1) {
        let count = 0
        while (this.weight >= this.selectedPlates[i].weights) {
            this.weight -= this.selectedPlates[i].weights
            count += 1
        }
        if (count >= 1) {
            exp = count 
            totalUsed.push(this.selectedPlates[i].weights) 
            totalUsed.push(this.selectedPlates[i].id) 
        }
    }
    //loop that gets every other element of totalUsed array starting with the first element           
    // AKA just displays the ID's of the weights 
    for (let i = 0; i < totalUsed.length; i += 2) {
        idsUsed.push(totalUsed[i + 1]);
    }
    //loop that gets every other element of totalUsed array starting with the second element
    //AKA just displays the weights without their IDs
    for (let i = 0; i < totalUsed.length; i += 2) {
        platesUsed.push(totalUsed[i]);
    }
console.log(exp);
console.log(idsUsed);
console.log(platesUsed);
console.log(totalUsed); 
return {remaining: this.weight} 
 }  
}

Calc（）是一个用于计算权重的点击函数。它可能非常混乱和不完整但这里的问题是我无法显示在calc（）内的任何创建的数组。在这种情况下，这将是idsUsed。我已经通过id值分配了举重板的图片。虽然，它们现在只是一个公共URL，但我打算稍后改变它。我正试图在网格列表中显示它们

以下是pounds.component.html

的相关摘要

<md-card>
  <md-input-container>
    <input [(ngModel)]="barWeight" mdInput placeholder="Bar Weight" dividerColor="accent">
  </md-input-container>
  <md-input-container>
    <input [(ngModel)]="totalWeight" mdInput placeholder="Total Weight" dividerColor="accent">
  </md-input-container>
  <button md-raised-button color="primary"  (click)="calc()">CALCULATE</button>
</md-card>

<md-card>
  <md-checkbox *ngFor="let plate of plates" 
  [(ngModel)]="plate.value">
    {{plate.weights}}
  </md-checkbox>
</md-card>

<md-card>
<md-card-content>
  <md-grid-list cols="4" rowHeight="200px">
    <md-grid-tile *ngFor="let idUsed of idsUsed">
    <img src="http://www.roguefitness.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/r/o/rogue-calibrated-lb-steel-plates-web{{idUsed}}.jpg" layout-fill>
    </md-grid-tile>
  </md-grid-list>
</md-card-content>

一切都是空白的。在控制台日志中，我得到了我需要的值，但我假设它们正在显示，因为它们在calc（）中。如果我将变量移到calc（）之外，则ngFor网格列表将起作用，但calc（）中的循环不能正常工作，因此结果遍布整个地方。

我不确定如何正确显示ids使用。感谢任何帮助。谢谢。

Answer 1

您正在idsUsed函数内发起calc()，因为哪个组件视图没有引用它。我在idsUsed函数之外初始化calc()，它开始工作。

这是你的代码的plnkr demo，希望这是你正在寻找的。

public barWeight: string = '45';
public totalWeight: string = '';
public weight: number = 0;

public idsUsed = []

public plates= [      
  { weights: 100, id: 2, value: false},
  { weights: 45, id: 3, value: true},
  { weights: 35, id: 4, value: true},
  { weights: 25, id: 5, value: true},
  { weights: 10, id: 6, value: true},
  { weights: 5, id: 7, value: true},
  { weights: 2.5, id: 8, value: true},
  { weights: 1.25, id: 9, value: false},
];

constructor() {

  }

// Filters out the plate array by value, 
// which in this case are checkboxes the user can toggle. 
get selectedPlates() {  
    return this.plates
        .filter(plate => plate.value)
}

public calc() {
    this.weight = ((parseFloat(this.totalWeight) - parseFloat(this.barWeight)) / 2);
    var totalUsed = [];
    this.idsUsed = [];
    var exp = 1; // just used to keep track of the count
    var platesUsed = [];
    //Beginning of calculation of weights on each side
    for (let i = 0; i < this.selectedPlates.length; i += 1) {
        let count = 0
        while (this.weight >= this.selectedPlates[i].weights) {
            this.weight -= this.selectedPlates[i].weights
            count += 1
        }
        if (count >= 1) {
            exp = count 
            totalUsed.push(this.selectedPlates[i].weights) 
            totalUsed.push(this.selectedPlates[i].id) 
        }
    }
    //loop that gets every other element of totalUsed array starting with the first element           
    // AKA just displays the ID's of the weights 
    for (let i = 0; i < totalUsed.length; i += 2) {
        this.idsUsed.push(totalUsed[i + 1]);
    }
    //loop that gets every other element of totalUsed array starting with the second element
    //AKA just displays the weights without their IDs
    for (let i = 0; i < totalUsed.length; i += 2) {
        platesUsed.push(totalUsed[i]);
    }
console.log(exp);
console.log(this.idsUsed);
console.log(platesUsed);
console.log(totalUsed); 
return {remaining: this.weight} 
 }

角度材质2：在函数中显示新创建的数组时出现问题

1 个答案: