Как обновить несколько параметров с помощью ngModelChange?

Question

В моем приложении я хотел бы изменить 3 значения одним ngModelChange.

Мой компонент выглядит так:

  model: any = {};
  images: any;
  public input = true;
  public dropdown = false;
  images : any;

  constructor(...services) {

  }

  ngOnInit() {
    let projectId = +this.route.snapshot.paramMap.get('projectId')
    this.model.projectId = projectId
    this.model.ram = 1073741824
    this.model.cpu = 1
    this.model.diskSize = 1073741824
    this.images = this.getImages()
    this.onChange(this.images)
  }

  onChange(test: any) {
    this.model.ram = test.ram
    this.model.cpu = test.cpu
    this.model.diskSize = test.diskSize
  }

  getImages(){
    this.imgService.getImages().subscribe(x => this.images = x)
  }


  hideInput(){
    this.dropdown = true;
    this.input = false;
    this.onChange(this.images)
  }

  hideDropdown(){
    this.input = true;
    this.dropdown = false;
  }

Мой html выглядит следующим образом:

<div class="row">
      <div class="col-3 mt-3">
        <div class="form-check form-check-inline">
          <input class="form-check-input" (click)="hideDropdown()" type="radio" 
         name="inlineRadioOptions" id="inlineRadio1" value="option1" checked>
          <label class="form-check-label" for="inlineRadio1">Image Url</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" (click)="hideInput()" type="radio" 
        name="inlineRadioOptions" id="inlineRadio2" value="option2">
          <label class="form-check-label" for="inlineRadio2">Pre Registered Images</label>
        </div>       
      </div>
      <div class="col-9" *ngIf="input">
        <mat-form-field class="example-full-width">
          <input matInput name="imageUrl" required [(ngModel)]="model.imageUrl" trim 
          pattern="(^(\/{1})([a-zA-Z]+))*^(ht)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0- 
          9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$"
          >
        </mat-form-field>
      </div>
      <div class="col-9" *ngIf="dropdown">
        <mat-form-field class="example-full-width">
          <mat-label>Please choose image</mat-label>
          <select matNativeControl name="imageUrl" required [(ngModel)]="model.imageUrl" 
          (ngModelChange)="onChange($event)">           
            <option *ngFor="let item of images" [ngValue]="item.imageUrl">
              {{ item.name }}
            </option>
          </select>
        </mat-form-field>
      </div>
    </div>

Хотите обновить процессор (а также ram и diskSize):

<div class="row">
      <div class="col-3 mt-3 labelText">
        <span class="spanText">CPU</span>
      </div>
      <div class="col-7">
        <mat-slider min="1" max="32" step="1" name="cpu" class="example-full-width" 
        [(ngModel)]="model.cpu">
        </mat-slider>
      </div>
      <div class="col-2">
        <div class="circle mt-1">{{model.cpu}}</div>
      </div>
    </div>

Json результат изображений из серверного API:

[
   {
      "id":1,
      "name":"cedric-ubuntu",
      "imageUrl":"someurl",
      "diskSize":10737418240,
      "ram":1073741824,
      "cpu":1
   },
   {
      "id":2,
      "name":"arzu-ubuntu",
      "imageUrl":"someurl",
      "diskSize":10737418240,
      "ram":2147483648,
      "cpu":2
   }
]

Пробовал также (изменить), но не работает. PS У меня есть один подобный лог c, который обновляет другой выпадающий список в соответствии с идентификатором, и он отлично работает. Но для нескольких параметров это не работает.

Answer 1

Вы используете ту же функцию "onChange" для ngModelChange и функцию "hideInput". При hideInput вы передаете объекту "images" в функцию, но в теге select вы просто передаете событие $ , а не объект изображения, поэтому он не работает.

РЕДАКТИРОВАТЬ

У вас есть

images: any; <--- double declared 

onChange(test: any) { <--- You're resiving one object here
    this.model.ram = test.ram
    this.model.cpu = test.cpu
    this.model.diskSize = test.diskSize
} 

hideInput(){
    this.dropdown = true;
    this.input = false;
    this.onChange(this.images) <--- HERE, you're passing object/array images
} 

(ngModelChange)="onChange($event)"> <----- Here yu're passing the select $event, not the object selected

Answer 2

Вы можете использовать FormArray для нескольких параметров. код выглядит как

const arr = new FormArray([
  new FormControl(),
  new FormControl()
 ]);

Вы можете перейти по этим ссылкам angular formArray dynamicForm