Question

我有一个角度加号按钮：

ggplot(iex, aes(x = as.character(bleach_time), y = a_i, fill = as.factor(dil))) +
  geom_boxplot() +
  geom_text_repel(aes(label = rep_id, colour = as.factor(dil)), na.rm = TRUE, 
    segment.alpha = 0, position = position_dodge(width = 0.7), direction = "x") +
  scale_color_discrete(l = 30) +
  scale_fill_discrete(l = 100)

单击按钮时显示的代码：

<div style="display:inline-block;text-align:left;margin-bottom:2vh;" class="col-md-10 col-md-offset-2">
          <button type="button" class="btn btn-default" (click)="MoreSentences(result.word)">
              <span class="glyphicon glyphicon-plus"></span>More Example Sentences
            </button>
      </div>

Component.ts：

<div *ngFor="let results of dictDataSentencesResults">
          <div *ngFor="let each of results.lexicalEntries">
          <div class="col-md-10 col-md-offset-2 border_bottom" style="border-bottom:1px solid darkgray;">
              <span style="padding-bottom:2vh;display:inline-block;font-size:18px;font-weight:bold;color: #f15a24;text-transform: uppercase;letter-spacing: 0.8px;">  {{each.lexicalCategory}} </span>
              </div>
              <div *ngFor="let sentences of each.sentences">
                  <div class="col-md-10 col-md-offset-2 border_bottom">
                      <span style="color:black;font-style:italic;font-weight: normal;padding-bottom:2vh;display:inline-block;font-size:18px;font-weight:bold;text-transform:capitalize;"> Phrase:</span>          <span style="padding-bottom:2vh;display:inline-block;font-size:18px;"> ' {{sentences.text}} '</span>
                      </div>
                </div>

              </div>
      </div>

我希望加号图标在我点击它时显示div并在我点击减号图标时隐藏。

页面如下所示：

我从未在角度中使用切换功能，因此非常感谢任何类型的建议。

Answer 1

您可以使用*ngIf根据通过点击图标切换的标记来隐藏和显示您的内容。可以使用相同的标志来设置要显示的图标。

Working demo

在角度点击时隐藏和显示

1 个答案: