时间戳

首页 > 解决方案 > Angular7 在一个选择中使用选定的选项来设置另一个选择中的选项

angular - Angular7 在一个选择中使用选定的选项来设置另一个选择中的选项

问题描述

我的 Angular 7 项目中有以下两个选择元素：

在此处输入图像描述

我的要求是根据从第一个选择中选择的值填充第二个选择中的元素。
到目前为止，我已经尝试了以下方法：

  1. 使用 ngModel 指令获取第一个选择的值
  2. 使用选定的值填充第二个 select 元素中的项目。

这是代码：
app.component.html： 

    <mat-form-field>
    <mat-label>Select Master Bot</mat-label>
    <mat-select [(ngModel)]="selectedMasterBot">
    <mat-option *ngFor="let masterBot of masterBotList" 
    [value]="masterBot.value">{{ masterBot.view }}</mat-option></mat-select> 
    </mat-form-field>&nbsp;
    <mat-form-field>
    <mat-label>Select UseCase</mat-label>
    <mat-select [(ngModel)]="selectedUseCase">
    <mat-option *ngFor="let useCase of 
    masterBotUseCaseMapping.selectedMasterBot" [value]="useCase.value">{{ 
    useCase.view}}
    </mat-option>
    </mat-select>
    </mat-form-field>
    <button mat-button (click)="print()">Click me</button>

app.component.ts： 


    public selectedMasterBot;
    public selectedUseCase;

    public masterBotUseCaseMapping = {
    "select1Value": [
    {
    "view": "incomprehension",
    "value": "incomprehensionID"
    },
    {
    "view": "greetings",
    "value": "greetingsID"
    }
    ], "select2Value": [
    {
    "view": "incomprehension",
    "value": "incomprehensionID"
    }
    ]
    }

    public masterBotList = [{
    view: 'select1',
    value: 'select1Value'
    },
    { 
    view: 'select2',
    value: 'select2Value'
    }]

标签： angularangular-forms

解决方案

一个简单的使用就ngModel可以解决你的级联下拉问题

演示在https://stackblitz.com/edit/angular-cascaded-dropdown

看起来您的数据中的映射不正确，您需要修复

更新小提琴https://stackblitz.com/edit/angular-wteh9o以支持您的数据结构。

这里的主要问题是您正在尝试访问属性值 isingdot notation而您应该使用array notationas

<mat-option *ngFor="let useCase of 
masterBotUseCaseMapping[selectedMasterBot]" [value]="useCase.value">

推荐阅读