如何根據從下拉串列中選擇專案來系結下拉串列

我有一個角度應用程式，因為我有兩個下拉串列，第一個是下拉串列，第二個是顯示下拉串列 9 或系結資料）基于從選擇串列中選擇專案

.component.ts

public billingSelect(data: any) {
    this.billingActionId = data;
}
public otherSelect(data: any) {
  this.otherActionId = data;
}

public actionSelect(data: any) {
  this.actionStatusTypeID = data;
}

.component.html

<div class="row">
  <div class="form-group">
    <div class="col-sm-3">
      <label for="action"> <b>Category</b></label>
    </div>
    <div class="col-sm-7">
      <select>
        <option value="" disabled [selected]="true"></option>
        <option>Billing</option>
        <option>other</option>
        <option>action</option>
      </select>
    </div>
  </div>
</div>

<select
  class="form-control"
  name="drpAction"
  id="actionSelect1ID"
  (change)="actionSelect($event.target.value)"
  [(ngModel)]="actionStatusTypeID"
>
  <option
    *ngFor="let code of memberContactCodes; let mIdx = index"
    [value]="mIdx"
  >
    {{code.Name}}
  </option>
</select>
<select
  class="form-control"
  name="drpAction"
  id="billingActionId"
  (change)="billingSelect($event.target.value)"
  [(ngModel)]="billingActionId"
>
  <option
    *ngFor="let code of billingActionCodes; let mIdx = index"
    [value]="mIdx"
  >
    {{code.Name}}
  </option>
</select>
<select
  class="form-control"
  name="drpAction"
  id="otherActionId"
  (change)="otherSelect($event.target.value)"
  [(ngModel)]="otherActionId"
>
  <option
    *ngFor="let code of otherActionCodes; let mIdx = index"
    [value]="mIdx"
  >
    {{code.Name}}
  </option>
</select>

.service.ts

public getMemberContactActionCodes() {
    let baseUrl = `/endpoint`;
    this._restfulService
      .restfulGetData(baseUrl)
      .subscribe(
        (actionLookupData: ActionLookupData) => {
          if (actionLookupData) {
            this.memberContactCodes = actionLookupData.MemberContactCodes;
            this.referralCodes = actionLookupData.ReferralCodes;
            this.otherActionCodes = actionLookupData.OtherActionCodes;
            this.standardActionCodes = actionLookupData.StandardActionCodes;
            this.billingActionCodes = actionLookupData.BillingActionCodes;
 }
        },
        (err) => {
          console.error(err);
        }
      );
  }

在上面，我必須根據從選項串列項中選擇下拉項來顯示下拉串列。

讓我們說，如果我從第一個下拉選項串列項中選擇計費，我必須顯示與計費相關的資料，即 billingActionCodes 等。 任何人都可以幫我解決這個問題

uj5u.com熱心網友回復：

您可以使用主題來執行操作并切換大小寫來為下拉串列分配特定值。

<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>

在選擇操作中選擇值并分配特定代碼。

 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

標籤：javascript 有角度的 angularjs 打字稿 落下

上一篇：常見開發模型-敏捷開發與瀑布開發模型詳解

下一篇：PrimeNGCarousel的指示器和分頁器樣式