html-如何显示基于Mat-Select选项的输入框

概述我有一个席位选择,其中包括两个选项：个人客户和组织客户.如果从下拉列表中选择Ind Cust,则应该看到三个选项名,姓氏和客户ID.但是,如果选择“组织客户”,则应该可以看到组织名称和组织ID.我已经准备好所有HTML代码,但是无法基于选择显示选项.HTML代码：<mat-form-field> <mat-label>Select a

我有一个席位选择,其中包括两个选项：个人客户和组织客户.如果从下拉列表中选择Ind Cust,则应该看到三个选项名,姓氏和客户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  *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  *ngIf="indCust">    Code for input Box of IndivIDual Customer   <mat-form-fIEld >    <input matinput placeholder="IndivIDual Customer" >  </mat-form-fIEld></div><div  *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;    }  }}

Stackblitz 总结

以上是内存溢出为你收集整理的html-如何显示基于Mat-Select选项的输入框 全部内容，希望文章能够帮你解决html-如何显示基于Mat-Select选项的输入框 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。