Я использую ngx-twitter-timeline, как обновить выпадающий список без перезагрузки страницы. - PullRequest
0 голосов
/ 05 сентября 2018

Я использую угловой материал как только страница перезагрузится, на ней будут показаны 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');
          }
        }        
    });
  }

}

изображение (после перезагрузки страницы отображается содержимое) enter image description here

image2 (если я нажму кнопку второй раз)

enter image description here

В этом втором изображении содержание не отображалось, но выделено место для 10 твитов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...