html - 如何基于 Mat-Select 选项显示输入框
问题描述
我有一个 mat-select,其中包含两个选项个人客户和组织客户。如果我从下拉列表中选择 Ind Cust,那么我应该看到三个选项 First Name、Last Name 和 Customer Id。但如果我选择组织客户,我应该能够看到组织名称和组织 ID。我已准备好所有 HTML 代码,但是我无法根据选择显示选项。
HTML 代码:
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
<mat-option value="indCust">IndividualCustomer</mat-option>
<mat-option value="orgCust">Organizational Customer</mat-option>
</mat-select>
</mat-form-field>
<div class="row" *ngIf="indCust; orgCust">
// Code for Input Box of Individual Customer
</div>
<ng-template #orgCust >
//Code for dropdown of Organization Customer
</ng-template>
打字稿代码
selected = '';
indCust: Boolean ;
if(this.selected == 'indCust'){
this.indCust = true;
} else {
this.indCust = false;
}
有人可以解释我做错了什么并帮助我找出正确的方法。
解决方案
我会这样做:
HTML 代码:
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select>
<mat-option *ngFor="let obj of list" (click)="get(obj)" [value]="obj"> {{obj.viewValue}}</mat-option>
</mat-select>
</mat-form-field>
<span *ngIf="isSelected">
<div class="row" *ngIf="indCust">
Code for Input Box of Individual Customer
<mat-form-field class="example-full-width">
<input matInput placeholder="Individual Customer" >
</mat-form-field>
</div>
<div class="row" *ngIf="!indCust">
Code for Combo Box of Organizational Customer
<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</span>
TS 代码:
import { Component } from '@angular/core';
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
list: any[] = [
{ value: 'indCust', viewValue: 'IndividualCustomer' },
{ value: 'orgCust', viewValue: 'Organizational Customer' }
];
foods: any[] = [
{ value: 'steak-0', viewValue: 'Steak' },
{ value: 'pizza-1', viewValue: 'Pizza' },
{ value: 'tacos-2', viewValue: 'Tacos' }
];
isSelected: boolean = false;
indCust: Boolean = undefined;
get(data) {
this.isSelected = true;
if (data.value == 'indCust') {
this.indCust = true;
console.log(data)
} else {
this.indCust = false;
}
}
}
推荐阅读
- python - 使用数组作为多变量函数的输入
- javascript - 样式在特定页面中无法正常工作
- apache-kafka - 重新启动后,Kafka Consumer 未使用上次提交的偏移量
- merge - >= 1 变量上的精确匹配和 >= 1 变量状态上的模糊匹配
- python - 来自 numpy 数组的 Keras 自定义数据生成器
- kubernetes - pdftron html2pdf 示例无法在 k8s 上运行?
- c++ - 如何使用链表从另一个类中正确调用打印函数?
- python - 从时间序列数据中确定傅立叶系数
- oracle - Oracle SYS_REFCURSOR 以外的其他选项
- node.js - Mongodb 通过本机 id 生成的 Node.js 后端查找记录