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

【问题标题】：Change and show dropdown value based on another drop down selection in Angular根据 Angular 中的另一个下拉选择更改并显示下拉值
【发布时间】：2021-01-12 15:35:02
【问题描述】：

我的 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' }
  ]

如何根据选择的产品也填充此字段？

【问题讨论】：

this.allProducts 元素是否有maxUsers？
它在这样的数组中有值： 0: {productId: "product0", maxUsers: 0, value2: 0, value3: 0} 1: {productId: "product1", maxUsers: 0 , value2: 0, value3: 0} 2: {productId: "product2", maxUsers: 0, value2: 0, value3: 0} 3: {productId: "product3", maxUsers: 30, value2: 100, value3: 10000 } 4: {productId: "product4", maxUsers: 60, value2: 100, value3: 10000} 5: {productId: "product5", maxUsers: 90, value2: 1000, value3: 100000} 6: {productId: "product6 ", maxUsers: 180, value2: 2000, value3: 1000000} 7: {productId: "product7", maxUsers: 30, value2: 10, value3: 5000}

标签： html angular typescript

【解决方案1】：

看起来product 中的maxUsers 是数字。尝试删除 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' }
  ]

【讨论】：