Угловой 5 Binding

Question

Я новичок в 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>   

Вот весь мой компонент, если вы хотите взглянуть: угловой компонент

Answer 1

Я думаю, что проблема здесь в том, что ваш объект 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>