Angular7 在 select 中使用 selected 选项来设置另一个 select 中的选项
Angular7 Use selected option in a select to set the options in another select
我的 Angular 7 项目中有以下两个 select 元素:
我的要求是根据第一个 select 的值 select 填充第二个 select 中的元素。
到目前为止,我已经尝试了以下方法:
- 使用 ngModel 指令获取第一个 selected 值
- 使用 selected 值填充第二个 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>
<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'
}]
简单的使用ngModel
就可以解决你的级联下拉问题
演示在 https://stackblitz.com/edit/angular-cascaded-dropdown
您的数据中的映射似乎不正确,您需要修复
更新 fiddle https://stackblitz.com/edit/angular-wteh9o 以支持您的数据结构。
这里的主要问题是您正在尝试访问 属性 值 dot notation
而您应该使用 array notation
作为
<mat-option *ngFor="let useCase of
masterBotUseCaseMapping[selectedMasterBot]" [value]="useCase.value">
我的 Angular 7 项目中有以下两个 select 元素:
我的要求是根据第一个 select 的值 select 填充第二个 select 中的元素。
到目前为止,我已经尝试了以下方法:
- 使用 ngModel 指令获取第一个 selected 值
- 使用 selected 值填充第二个 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>
<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'
}]
简单的使用ngModel
就可以解决你的级联下拉问题
演示在 https://stackblitz.com/edit/angular-cascaded-dropdown
您的数据中的映射似乎不正确,您需要修复
更新 fiddle https://stackblitz.com/edit/angular-wteh9o 以支持您的数据结构。
这里的主要问题是您正在尝试访问 属性 值 dot notation
而您应该使用 array notation
作为
<mat-option *ngFor="let useCase of
masterBotUseCaseMapping[selectedMasterBot]" [value]="useCase.value">