时间戳

首页 > 解决方案 > 根据 Angular 中的另一个下拉选择更改并显示下拉值

html - 根据 Angular 中的另一个下拉选择更改并显示下拉值

问题描述

我的 HTML 中有以下下拉列表：

<td colspan="2" width="100%">
    <mat-form-field class="generate-full-width">
    <mat-select placeholder="Product" formControlName="product" name="product" (selectionChange)="getDefaultValues()">
    <mat-option *ngFor="let product of products" [value]="product.value">
                                                    {{product.viewValue}}
    </mat-option>
    </mat-select>
    <mat-error *ngIf="submitted && hasError('product', 'required')">Product is required</mat-error>
    </mat-form-field>
</td>

对于每种产品，我都会填充一些领域。每个产品都有三个与之关联的值，我需要在选择产品时显示它们。这些字段之一是下拉列表，在 HTML 中如下所示：

<td colspan="2" width="100%">
    <mat-form-field class="generate-full-width">
    <mat-select placeholder="Max Users" formControlName="maxUsers" name="maxUsers">
    <mat-option *ngFor="let user of maxUsers" [value]="user.value">
                                                {{user.viewValue}}
    </mat-option>
    </mat-select>
    <mat-error *ngIf="submitted && hasError('maxUsers', 'required')">Max Users is required</mat-error>
    </mat-form-field>  
</td>

我的 ts 文件中的getDefaultValues()方法是这样的：

let defaultArray = this.getDefaultConfig().filter((item) => {
    return item.id === product;
});
        
this.form.get('maxUsers').setValue(defaultArray[0].maxUsers)
this.form.get('value2').setValue(defaultArray[0].value2);
this.form.get('value3').setValue(defaultArray[0].value3);

getDefaultConfig()方法是：

let defaultProductConfig: any=[];
    this.allProducts.forEach(element => {
      
      defaultProductConfig.push
        ({"id": element["productId"],
        "maxUsers" : element["maxUsers"],
        "value2": element["value2"],
        "value3": element["value3"]});
    });
    
    return defaultProductConfig;
  }

当我选择产品时，会填充 value2 和 value3。它们是文本字段。但未填充 maxUsers 值。它有一个允许值列表，每个产品都只有这些值。它们被定义为：

maxUsers = [
    { value: '30', viewValue: '30' },
    { value: '60', viewValue: '60' },
    { value: '90', viewValue: '90' },
    { value: '120', viewValue: '120' },
    { value: '150', viewValue: '150' },
    { value: '180', viewValue: '180' },
    { value: '1200', viewValue: 'Unlimited' }
  ]

如何根据所选产品填充此字段？

标签： htmlangulartypescript

解决方案

它看起来像maxUsers在product数字中。尝试删除value.

maxUsers = [
    { value: 30, viewValue: '30' },
    { value: 60, viewValue: '60' },
    { value: 90, viewValue: '90' },
    { value: 120, viewValue: '120' },
    { value: 150, viewValue: '150' },
    { value: 180, viewValue: '180' },
    { value: 1200, viewValue: 'Unlimited' }
  ]

推荐阅读