Angular Material 2：无法在函数中显示新创建的数组

Question

我正在尝试创建一个杠铃片计算器，用户可以在其中输入所需的总重量和杠铃重量，该应用程序将显示他们在每一侧需要的重量。现在它仍然很准系统，但我遇到了一个让我有点难过的问题。在我的 "pounds" 组件中，我尝试计算每一侧所需的重量。一些带有注释的代码：

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 值分配了举重板的图片。虽然，它们现在只是 public 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() 内的循环无法正常工作，因此结果到处都是。

我不确定如何正确显示 idsUsed。感谢任何帮助，谢谢。

Answer 1

您正在 calc() 函数内部启动 idsUsed，因为组件视图没有引用它。我在 calc() 函数之外初始化了 idsUsed 并且它开始工作了。

这是您的代码的 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} 
 }

Angular Material 2：无法在函数中显示新创建的数组

Angular Material 2: Having trouble displaying a newly created array within a function

arrays

loops

typescript

angular-material2

angular