0
私は単純なプロジェクトをやっているでは空の配列は：角度2：コンポーネントのHTML
は、2つの入力のスライダとボタン「計算」をあり、ボタンが押されたときに、計算が行われ、表に印刷されています。
私はボタンを押したときに少し問題がありますが、テーブルComponentは答え配列が空であることを示していますが、コンストラクタからコンソールに出力するとすべてが表示されます。
誰かに助けてもらえますか？ *ngForを実行して、後で要素をループします。
サービス：
@Injectable()
export class DataService {
loanArray: Payment[] = [];
setCalculatedPayments(loanSum: number, loanTime:number) {
this.loanArray = new PaymentsCalculated(loanSum, loanTime).calculateLoanDetails();
}
getCalculatedPayments() {
return this.loanArray;
}
}
ローンコンポーネント：
export class LoanTablesComponent implements OnInit {
loanArray: Payment[] = []; // is it always empty?
constructor(private DataService: DataService) {
this.loanArray = this.DataService.getCalculatedPayments();
// here it prints the loanArray as required
// but if I print out in the .html, it is always zero
}
ngOnInit() {
}
}
計算コンポーネント：
export class CalculatorComponent implements OnInit {
loanSum: number;
loanTime: number;
constructor(private DataService: DataService) {
setTimeout(() => this.loanSum = 500);
setTimeout(() => this.loanTime = 1);
// for input sliders
}
ngOnInit() {
}
calculatePayments(): void{
this.DataService.setCalculatedPayments(this.loanSum, this.loanTime);
}
}
は（単にアドバイスを学習して求めて、助けをありがとう：
'CalculatorComponent'と' LoanTablesComponent'の関係は何ですか？ – AngularChef
Calculatorは、計算のために入力する入力のUIを表示します。ボタンを押すとデータサービスにデータが与えられ、LoanTablesはテーブルを出力し、データサービスのデータを受け取ります。 –
Alright。しかし、私はそれらが**コンポーネントツリー**にどのように関連しているのかを意味しましたか？ （例えば、もう一方の子ですか？）タイミング問題があるようです： 'LoanTablesComponent'がインスタンス化するとすぐにデータを読み込もうとしますが、' setCalculatedPayments（） 'を呼び出すまでデータは読み込まれません。 'loanArray'に非プリミティブな値が含まれている場合、私は変更検出があなたの設定ではうまくいかないと思います。おそらく 'LoanTablesComponent'の' loanArray'を[getプロパティ]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get）で置き換えてみてください。 – AngularChef