时间戳

首页 > 解决方案 > 如何使用 ngModelChange 更新多个参数？

angular - 如何使用 ngModelChange 更新多个参数？

问题描述

在我的应用程序中，我想用一个 ngModelChange 更改 3 个值。

我的组件看起来像： 

  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>

想要更新 cpu（以及 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>

来自后端 api 的图像的 Json 结果：

[
   {
      "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 我有一个类似的逻辑，它根据 id 更新另一个下拉列表，它工作正常。但是对于多个参数，它不起作用。

标签： angulartypescriptangular-ngmodelangular2-ngmodelangular-ngmodelchange

解决方案

您对 ngModelChange 和函数“hideInput”使用相同的“onChange”函数，在 hideInput 上，您将对象“images”传递给函数，但在选择标签中，您只是传递 $event，而不是“图像”对象，这就是它不起作用的原因。

编辑

你有这个

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

推荐阅读