时间戳

首页 > 解决方案 > onClick 选择标签下拉选项切换 div 容器

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

问题描述

    <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，就像其他选项一样

标签： angulartypescript

解决方案

你可以这样做：

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

推荐阅读