Question

目前，我正在使用一个下拉按钮，这有点奇怪。但是我有点没办法了，希望你们能帮助我。我已经尝试了使用“选择”标签的传统方式，但是我面临的问题是我需要自定义无法执行的下拉菜单。 .html代码段就是这样，

              <div class="month-selector btn-group">
                <button type="button" data-toggle="dropdown">
                  Dropdown button
                </button>
                <ul class="dropdown-menu scrollable-menu" role="menu">
                  <li>
                    <div class="item">Select Category</div>
                  </li>
                  <hr class="style-hr">
                  <li>
                    <div class="item">General Inquiries</div>
                  </li>
                </ul>
              </div>

.ts文件是这样的。

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-case-accordian',
  templateUrl: './case-accordian.component.html',
  styleUrls: ['./case-accordian.component.scss']
})
export class CaseAccordianComponent implements OnInit {
constructor(){}
  ngOnInit() {}
}

我需要在.ts文件中进行哪些更改，以使所选的值反映回“下拉按钮”。自从我是Angular 6的新手以来，我们将提供任何帮助。

Answer 1

像这样编辑您的component.ts：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-case-accordian',
  templateUrl: './case-accordian.component.html',
  styleUrls: ['./case-accordian.component.scss']
})
export class CaseAccordianComponent implements OnInit {
customText = "Dropdown button";
constructor(){}
  ngOnInit() {}

valueClick(value: string){
  this.customText = value;
}
}

然后输入您的html

   <div class="month-selector btn-group">
                <button type="button" data-toggle="dropdown">
                  {{customText}}
                </button>
                <ul class="dropdown-menu scrollable-menu" role="menu">
                  <li>
                    <div class="item" (click)="valueClick('Select Category')">Select Category</div>
                  </li>
                  <hr class="style-hr">
                  <li>
                    <div class="item"  (click)="valueClick('General Inquiries')">General Inquiries</div>
                  </li>
                </ul>
              </div>

如何在角度6中使用输入标签进行下拉

1 个答案: