我正在使用ngx-twitter-timeline如何刷新下拉菜单而不重新加载页面

Question

我正在使用Angular材质 一旦页面重新加载它，第二次显示10条最新推文，如果我单击同一按钮，则内容未显示，但显示10条推文分配的空间。当我重新加载该页面时，它将显示最近的10条推文。

在这里我提到了我的HTML和下拉菜单的图像

HTML

<mat-toolbar class="olc-menu" fxLayoutAlign="center center">
              <button mat-fab color="primary"  [matMenuTriggerFor]="menu"  (click)="openMegaMenu()">Tweets</button>
  <mat-menu #menu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
      <div fxLayout="row wrap">
            <div fxFlex="25" fxLayout="column" class="p-1"> 
                </div>
          <div fxFlex="50" fxLayout="column" class="p-1"> 
              <a mat-menu-item routerLink="/"><b>Twitter</b></a>
              <mat-divider></mat-divider> 
              <ngx-twitter-timeline 
              [data]="{sourceType: 'url', url: 'https://twitter.com/RajuOakLiquor' }"
              [opts]="{tweetLimit: 10}"
              ></ngx-twitter-timeline>
          </div>
          <div fxFlex="25" fxLayout="column" class="p-1"> 
            </div>
      </div>
  </mat-menu>
</mat-toolbar>

component.ts

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

@Component({
  selector: 'app-socialmedia',
  templateUrl: './socialmedia.component.html',
  styleUrls: ['./socialmedia.component.scss']
})
export class SocialmediaComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  openMegaMenu(){
    let pane = document.getElementsByClassName('cdk-overlay-pane');
    [].forEach.call(pane, function (el) {
        if(el.children.length > 0){
          if(el.children[0].classList.contains('mega-menu')){
            el.classList.add('mega-menu-pane');
          }
        }        
    });
  }

}

图片（页面重新加载显示内容后）

图片2 （如果我第二次单击该按钮）

在第二个图像中未显示内容，但分配了10条tweet的空间。