I need to show the dropdown lists based on the selected value from the first dropdown

.constant.ts

export const recordConstant = {
    memberContact: 'Member Contact',
    about: 'About',
    other: 'Other',
    standarActions:'Standard Actions',
  gymSignUp: 'Gym Sign Up',
    gymVisits: 'Gym Visits'
    }

.component.ts

export class RecordComponent implements OnInit, OnDestroy {

 public recordConstant= RecordConstant;

public memberContactCodes: LookupActionCode[];
  public memberContactCodes: LookupActionCode[];
  public otherCodes: LookupActionCode[];
  public standardActionCodes: LookupActionCode[];
  public aboutCodes: LookupActionCode[];


ngOninit(){
}
public getMemberContactActionCodes() {
    let baseUrl = `/endpoint`;
    this._restfulService
      .restfulGetData(baseUrl)
     .subscribe(
        (actionLookupData: ActionLookupData) => {
          if (actionLookupData) {
            this.memberContactCodes = actionLookupData.MemberContactCodes;
           this.otherCodes = actionLookupData.OtherActionCodes;
            this.standardActionCodes = actionLookupData.StandardActionCodes;
            this.aboutCodes = actionLookupData.BillingActionCodes;
            }
       
}

public setActionList(){
 //let  Lists
  //let ActionLists = LookupActionCode[this.Name]
  let Lists:any =''
  switch(this.actionType){
    case ActionRecordConstant.memberContact:
      Lists = this.memberContactCodes;
      break;
      case RecordConstant.referral:
      Lists = this.aboutCodes;
      break;
      case RecordConstant.other:
      Lists = this.otherCodes;
      break;
      case Constant.standardActions:
      Lists = this.standardActionCodes;
      break;
case: Constant.gymSignUp:
Lists = ///
break;
  }
  return Lists;

}

.component.html

<label for="action" > <b>Category</b></label>
<select  required (change) ="setActionList()">
                <option value="" disabled [selected]="true"></option>
             
                <option [value] = "recordConstant.about">
                 {{actionRecordConstant.about}}
                </option>
                <option [value] ="recordConstant.memberContact">
                  {{actionRecordConstant.memberContact}}
                 </option>
                 <option [value]="recordConstant.other" >
                  {{actionRecordConstant.other}}
                 </option>
                 <option [value] ="recordConstant.standActions">
                  {{actionRecordConstant.billing}}
                 </option>
        </select>
 <label for="action" > <b>Lists</b></label>
 <select >
                <option value="" disabled [selected]="true"></option>
               <option *ngFor="let actionlist of Lists"
                  [value] ="actionlist.Name"> {{actionlist.Name}}</option></select>

From the above based on the selection of Category Ihaveto change the lists I have tried the above code but not showing the lists based on the first dropdown selection

Can anyone help me on this

CodePudding user response：

Try this, not sure this is what you expect.

.component.html

 <label for="optionsList" > <b>Category</b></label>
 <select  required (change)="setActionList($event.target.value)">
   <option value="" disabled [selected]="true"></option>
   <option *ngFor="let action of optionsList"
           [value]="action"> {{action}}</option>
 </select>
 <label for="anotherOptionList" > <b>Lists</b></label>
 <select >
   <option value="" disabled [selected]="true"></option>
   <option *ngFor="let anotherOption of anotherOptionList"
           [value]="anotherOption"> {{anotherOption}}</option>
 </select>

.component.ts

 optionsList: string[] = ['Member Contact', 'About', 'Other', 'Standard Actions'];
 anotherOptionList: LookupActionCode[] = [];

 setActionList(actionType: any): void {
   this.anotherOptionList = [];
   switch (actionType) {
     case 'Member Contact':
       this.anotherOptionList = this.memberContactCodes;
       break;
     case 'About':
       this.anotherOptionList = this.aboutCodes;
       break;
     case 'Other':
       this.anotherOptionList = this.otherCodes;
       break;
     case 'Standard Actions':
       this.anotherOptionList = this.standardActionCodes;
       break;
     default:
       this.anotherOptionList = [];
   }
 }