问在angular 4中显示一个div并隐藏另一个div

EN

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  showMainContent: Boolean = true;

  constructor() {}

   ShowHideButton() {
      this.showMainContent = this.showMainContent ? false : true;
   }
}

<div *ngIf="!showMainContent">
  <button (click)="ShowHideButton()">Show Sub content</button>
  My Main content
</div>
<div *ngIf="showMainContent">
  Sub Content
  <button (click)="ShowHideButton()">Show Main Content</button>
</div>

ToggleButton() {
  this.showSelected = !this.showSelected;
}

ShowButton() {
  this.showSelected = !this.showSelected;
}