Angular 单击后隐藏并显示

我有一个加号按钮：

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

我希望在单击加号图标时加号图标为负号，并在单击减号图标时显示div和隐藏

页面如下所示：

---

我从未在angular中使用过切换功能，因此非常感谢您提供任何建议。

您可以使用

*ngIf

根据通过单击图标切换的标志隐藏和显示您的内容。相同的标志可用于设置要显示的图标

---

---

*ngIf of one property hide and show this div您可以使用容器来隐藏/显示内容

//单击按钮时，此处显示/隐藏的代码

将“show”变量设置为“！show”。如果您只有一个按钮和一个容器，则此功能可以正常工作。不要忘记在组件中将“show”变量初始化为“false”。

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

  MoreSentences(val) {
    console.log(val);
    this.gotHttpService.getDictonaryDataSentences(val).subscribe(
      data => {

        this.dictDataSentences = data;
        console.log(this.dictDataSentences);
        this.dictDataSentencesResults = data.results;
        console.log(this.dictDataSentencesResults);

      } ,
      error => {
        console.log("some error occured");
        console.log(error.errorMessage);
      }
    );

        }