如何根据 angular 中的 switch case 显示列表

Question

我需要根据第一个下拉列表中的选定值显示下拉列表

.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" class="cpp-required"> <b>Category</b></label>
<select class="form-control" 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" class="cpp-required"> <b>Lists</b></label>
 <select class="form-control">
                <option value="" disabled [selected]="true"></option>
               <option *ngFor="let actionlist of Lists"
                  [value] ="actionlist.Name"> {{actionlist.Name}}</option></select>

根据上面选择的类别我必须更改列表我试过上面的代码，但没有显示基于第一个下拉选择的列表

谁能帮我解决这个问题

Answer 1

试试这个，不确定这是否符合您的期望。

.component.html

 <label for="optionsList" class="cpp-required"> <b>Category</b></label>
 <select class="form-control" 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" class="cpp-required"> <b>Lists</b></label>
 <select class="form-control">
   <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 = [];
   }
 }

如何根据 angular 中的 switch case 显示列表

how to show the lists based on the switch case in angular

javascript

switch-statement

typescript

angular