角度2：点击底部边框

Question

我有3个标签，单击标签时我想要一个底部边框。当我点击另一个标签时，应该将底部边框赋予该标签。

我试过下面的代码。

.features_selection_menu .menu_div {
  display: inline-block;
  margin-left: -3px;
  vertical-align: bottom;
}
.features_selection_menu .menu_div .menu_text_div {
  display: table-cell;
  vertical-align: bottom;
  height: 50px;
  border-bottom: 2px transparent solid;
}
.features_selection_menu .menu_div .menu_text_div span {
  position: relative;
  bottom: 8px;
  font-size: 18px;
}
.features_selection_menu .menu_div .menu_text_div_border_bottom {
  border-bottom: 2px #3a3f51 solid;
}
.features_selection_menu .menu_div .default_feature_text_color {
  color: #98a6ad;
}

.features_selection_menu .menu_div:first-child {
  margin-left: 0px !important;
}
.features_selection_menu .menu_div:nth-child(n) {
  margin-left: 40px;
}

<div class="features_selection_menu" [ngSwitch]="currentFeature">
              <div class="menu_div">
                <div class="menu_text_div {{currentFeature=='website'  ? 'menu_text_div_border_bottom' : ''}}  " (click)="currentFeature='website'">
                   <span class="cursor_pointer {{currentFeature=='website' ? 'selected_feature_text_color' : 'default_feature_text_color'}}  ">&nbsp;Website&nbsp;</span>
                </div>
              </div>

              <div class="menu_div">
                <div class="menu_text_div {{currentFeature=='app' ? 'menu_text_div_border_bottom' : ''}}  " (click)="currentFeature='app'">
                   <span class="cursor_pointer {{currentFeature=='app' ? 'selected_feature_text_color' : 'default_feature_text_color'}}  ">&nbsp;App&nbsp;</span>
                </div>
              </div>

              
            </div>

我没有点击我的输出。

任何帮助都会很棒。

谢谢。

Answer 1

是的，使用ngClass而不是普通的类属性

<div [ngClass]="{'menu_text_div': true, 'menu_text_div_border_bottom': currentFeature=='app'}  " >