0

我是 angular 5 的新手，我正在研究根据行李和乘客数量计算汽车数量的任务，因为每辆车都有特定的容量。所以用户输入这两个数字然后我显示一个下拉菜单来选择汽车类型如果所选类型的容量小于用户输入的行李或乘客我显示另一个下拉菜单..等直到行李和乘客的汽车总容量等于或大于用户输入的值，这是我正在处理的内容的一个简短说明。

问题是：如果用户选择了第一辆车并且容量小于输入的乘客和行李编号数据，它会显示另一个字段，但该值不会出现在第一个字段中，直到我从下一个字段中选择另一辆车然后我再次返回选择第一个字段的值（我知道它已经在我已经检查过的数组中，但该值没有出现在选择框中）。

我想要实现的是在第一个字段中显示该值，而不是在选择第二个或第三个值之后选择它，然后再次重新选择它。

     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 组件

4

1 回答 1

0

我认为这里的问题是您的 ngModel 对象与您的 ngValue 对象不匹配，即 ngModel 是 Car 对象，而 ngValue 似乎是 CarType。您应该将类​​型添加到 Car 对象并使用它来指示预期的内容。

<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].type" (change)="printType2()" required>
            <option *ngFor="let type of carTypes" [ngValue]="type">{{ type.model+' '+type.manufacturer }}</option>
        </select>
    </div>
</div>
于 2018-04-17T18:29:22.903 回答