时间戳

首页 > 解决方案 > 如何使用角度6中的输入标签进行下拉

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

问题描述

有类似的东西，但问题是当我单击任何选项时，它没有被选中并且名称没有更改为选项名称。 目前我正在使用一个有点奇怪的下拉按钮。但我有点用尽了选择，希望你们能帮助我解决这个问题。我已经尝试过使用“选择”标签的传统方式，但我面临的问题是我需要自定义我无法做到的下拉正文。.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 的新手。在此先感谢。

标签： typescriptangular6

解决方案

像这样编辑你的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>

推荐阅读