私はAngular 5が初めてで、各車にはそれぞれ特定の容量があるため、バッグと乗客の数に基づいて車の数を計算するタスクに取り組んでいます。したがって、ユーザーは両方の数字を入力し、選択したタイプの容量がユーザーが入力したバッグまたは乗客よりも少ない場合は、車のタイプを選択するためのドロップダウン メニューを表示します。バッグと乗客の車の合計容量まで、別のドロップダウンを表示します。ユーザーが入力したものと等しいかそれ以上です。これは、私が取り組んでいることの簡単な説明です。
問題は次のとおりです。ユーザーが最初の車を選択し、容量が入力された乗客数とバッグ番号のデータよりも少ない場合、別のフィールドが表示されますが、次のフィールドから別の車を選択するまで最初のフィールドに値が表示されません。もう一度最初のフィールドの値を選択することに戻ります(すでにチェックした配列に既にあることはわかっていますが、値は選択ボックスに表示されていません)。
私が達成しようとしているのは、2番目または3番目の値を選択してから再度選択した後ではなく、最初のフィールドに値を表示することです。
printType2(){
// at the first time this function is executed the carsToBeAdd array only has one empty object
let totalCapacityPassengers = 0;
let totalCapacityBags = 0;
console.log(this.carsToBeAdded);
for(let i =0;i < this.carsToBeAdded.length; i++){
if(!isNaN(Number(this.carsToBeAdded[i].NumberOfPassengers)) && !isNaN(Number(this.carsToBeAdded[i].NumberOfBags))){
totalCapacityPassengers +=Number(this.carsToBeAdded[i].NumberOfPassengers);
totalCapacityBags += Number(this.carsToBeAdded[i].NumberOfBags);
}
}
console.log(totalCapacityBags);
console.log(totalCapacityPassengers);
if((totalCapacityPassengers < this.booking.numOfPassengers || totalCapacityBags < this.booking.numOfBags)&& this.carsToBeAdded[this.carsToBeAdded.length-1].id){
this.carsToBeAdded.push({});
}
else
{
console.log('You got the right number');
}
}
これがcomponent.Html部分です
<div class="form-group row" *ngFor="let x of carsToBeAdded;let i=index">
<label class="col-2 col-form-label">Car #{{i+1}} Type</label>
<div class="col-10">
<select class="form-control" name="car_type_id" [(ngModel)]="carsToBeAdded[i]" (change)="printType2()" required>
<option *ngFor = "let type of carTypes" [ngValue]="type">{{ type.model+' '+type.manufacturer }}</option>
</select>
</div>
</div>
あなたが見たい場合に備えて、これが私のコンポーネント全体です: Angularコンポーネント