如何根据从下拉列表中选择项目来绑定下拉列表

Question

我有一个下拉菜单，我必须显示 constant.ts 文件中的这个下拉菜单，在第二个下拉菜单中，我必须显示基于 select 第一个下拉菜单值的下拉菜单。

.constant.ts

export const ActionRecordConstant = {
  contact: 'Contact1',

  about: 'About',
};

.component.ts

public getCodes() {
  let baseUrl = `/api end point`;
  this._restfulService
    .restfulGetData(baseUrl)

    .subscribe(
      (actionLookupData: ActionLookupData) => {
        if (actionLookupData) {
          this.contactCodes = actionLookupData.contactCodes;
          this.aboutCodes = actionLookupData.aboutCodes;
        }
      },
      (err) => {
        console.error(err);
      },
    );
}

public contactSelect(data: any) {
  this.contactId = data;
}
public aboutSelect(data: any) {
  this.aboutId = data;
}

.component.html

<div class="row mt-15">
  <div class="form-group">
    <div class="col-sm-3">
      <label> <b>Contact</b></label>
    </div>
    <div class="col-sm-7">
      <select class="form-control">
        <option value="" disabled [selected]="true"></option>
        <option>About</option>
        <option>Contact</option>
      </select>
    </div>
  </div>
</div>
<div class="row mt-15">
  <div class="form-group">
    <div class="col-sm-3">
      <label> <b>Action</b></label>
    </div>
    <div class="col-sm-7">
      <select>
        <option value="" disabled [selected]="true"></option>
        <option>//code</option>
      </select>
    </div>
  </div>
</div>

所以我的要求是，当我们 select 来自第一个列表的类别的任何列表时，我们必须在第二个下拉列表中显示相关的下拉列表。

Answer 1

您可以使用主题来执行操作并切换大小写来为下拉列表分配特定的值。

<select
  *ngIf="billingActions$ | async as actions"
  #action
  (change)="onSelectAction(action.value)"
>
  <option value="0" selected>pick action</option>
  <option *ngFor="let action of actions" [value]="action.name">
    {{ action.name }}
  </option>
</select>
<select *ngIf="actionCodes$ | async as codes">
  <option *ngFor="let code of codes">{{ code.name }}</option>
</select>

在 select 操作中选择值并分配特定代码。

 private selectedAction = new Subject();
  private selectedAction$ = this.selectedAction.asObservable();

  billingActions = [
    {
      name: 'billing',
    },
    {
      name: 'member',
    },
    {
      name: 'other',
    },
  ];

  memberContactCodes = [
    {
      name: 'member Action Code A',
    },
    {
      name: 'member Action Code B',
    },
  ];

  billingActionCodes = [
    {
      name: 'billing Action A',
    },
    {
      name: 'billing Action B',
    },
  ];

  otherActionCode = [
    {
      name: 'Other Action A',
    },
    {
      name: 'OtherAction B',
    },
  ];

  categories = [
    { id: 1, name: 'billing' },
    { id: 2, name: 'others' },
  ];

  billingActions$ = of(this.billingActions);

  actionCodes$ = this.selectedAction$.pipe(
    map((action: string) => {
      switch (action) {
        case 'billing':
          console.log('billin');
          return this.billingActionCodes;
        case 'member':
          return this.memberContactCodes;
        case 'other':
          return this.otherActionCode;
        default:
          return this.billingActionCodes;
      }
    })
  );

  onSelectAction(value) {
    this.selectedAction.next(value);
  }

你可以在这里看到一个例子：https://stackblitz.com/edit/angular-ivy-5ea4fw

如何根据从下拉列表中选择项目来绑定下拉列表

How to bind the dropdown lists based on selecting the items from the dropdowns

javascript

angular

typescript

dropdown