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）从下拉菜单中我要显示容器1 div，像这样的其余选项

Answer 1

您可以按照以下方式进行操作：

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

Answer 2

<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() {}
}

添加控件变量（selectedValue）以与选择的值绑定，并使用* ngSwitch显示所需的约束蛋白

onClick选择标签下拉选项切换div容器

2 个答案: