OnClick选择标签下拉选项切换DIV容器

Question

    <div>
  <select label="Payment Options">
    <option *ngFor="let option of paymentOptions" [value]="option.value">{{ option.label }}
    </option>
  </select>
</div>
<!-- Selection Option 1 -->
<div>
  Container 1
</div>
<!-- Selection Option 2 -->
<div>
  Container 2
</div>
<!-- Selection Option 3 -->
<div>
  Container 3
</div>
<!-- Selection Option 4 -->
<div>
  Container 4
</div>
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-payment-option-dropdown',
  templateUrl: './payment-option-dropdown.component.html',
  styleUrls: ['./payment-option-dropdown.component.scss']
})
export class PaymentOptionDropdownComponent implements OnInit {
  paymentOptions: DropdownItemOption[] = [
    {
      label: 'Test 1',
      value: 'Test 1'
    },
    {
      label: 'Test 2',
      value: 'Test 2'
    },
    {
      label: 'Test 3',
      value: 'Test 3'
    },
    {
      label: 'Test 4',
      value: 'Test 4'
    }
  ];
  constructor() {}
  ngOnInit() {}
}

我有一个带有不同选项以及四个DIV标签的下拉列表，我想编写一个功能来切换下拉选项的容器onclick，例如，如果我从下拉菜单中选择选项1（测试1）我想显示容器1div，例如其余选项

Answer 1

<div>
  <select label="Payment Options" [(ngModel)]="selectedValue">
    <option *ngFor="let option of paymentOptions" [value]="option.value">{{ option.label }}
    </option>
  </select>
</div>
<div [ngSwitch]="selectedValue">
 <!-- Selection Option 1 -->
<div *ngSwitchCase="paymentOptions[0].value">
  Container 1
</div>
<!-- Selection Option 2 -->
<div *ngSwitchCase="paymentOptions[1].value">
  Container 2
</div>
<!-- Selection Option 3 -->
<div *ngSwitchCase="paymentOptions[2].value">
  Container 3
</div>
<!-- Selection Option 4 -->
<div  *ngSwitchCase="paymentOptions[3].value">
  Container 4
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-payment-option-dropdown',
  templateUrl: './payment-option-dropdown.component.html',
  styleUrls: ['./payment-option-dropdown.component.scss']
})
export class PaymentOptionDropdownComponent implements OnInit {
  paymentOptions: DropdownItemOption[] = [
    {
      label: 'Test 1',
      value: 'Test 1'
    },
    {
      label: 'Test 2',
      value: 'Test 2'
    },
    {
      label: 'Test 3',
      value: 'Test 3'
    },
    {
      label: 'Test 4',
      value: 'Test 4'
    }
  ];
  selectedValue = 'Test 1';    
  constructor() {}
  ngOnInit() {}
}

添加控制变量（selected Value）与推出的值结合并使用 *ngswitch显示您想要的Stoneiner

Answer 2

您可以像下面的那样做：

html：

<select [(ngModel)]="selectedOption" (ngModelChange)="setOption($event)">
    <option *ngFor="let option of paymentOptions" [value]="option.value">{{ option.label }}
    </option>
</select>
<div *ngIf="selectedOption == paymentOptions[0].value">
    Container 1
</div>
<div *ngIf="selectedOption == paymentOptions[1].value">
    Container 1
</div>
// Similarly for Container 3 & 4

组件：

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-payment-option-dropdown',
    templateUrl: './payment-option-dropdown.component.html',
    styleUrls: ['./payment-option-dropdown.component.scss']
})
export class PaymentOptionDropdownComponent implements OnInit {
    selectedOption: any = '';
    paymentOptions: DropdownItemOption[] = [
        {
            label: 'Test 1',
            value: 'Test 1'
        },
        {
            label: 'Test 2',
            value: 'Test 2'
        },
        {
            label: 'Test 3',
            value: 'Test 3'
        },
        {
            label: 'Test 4',
            value: 'Test 4'
        }
    ];
    setOption(event){
        this.selectedOption = event;
    }
}