Получить данные из твиттера и загрузить в таблицу в Angular

Я получаю список твитов из функции get tweetList() после ввода поискового запроса.

import { Component, OnInit,ChangeDetectionStrategy,Input} from '@angular/core';
import { RestService } from 'src/rest.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})


export class AppComponent implements  OnInit  {
   _access_token : string;
   _tweet_list = {};
   _query : string = 'q=obama'
   _searchItem: string = 'q='
   _serachCount: string = '&count=100'
   @Input('data') collection: any[]; 
   p: number = 1;
   tweetId:string;

   constructor(private apiService: RestService){ 

  }

  getAccessToken(){
    this.apiService.auth()
    .subscribe(
      response => {
        localStorage.setItem('token',response.json()['access_token'])
      },
      error => {}
    );
  }


  getTweetList(q:string){
    this.apiService.getTweet(q, localStorage.getItem('token'))
    .subscribe(
      response => {
        this._tweet_list = response.json()['statuses'];
        this.collection = response.json()['statuses'];
        console.log('Enter and Search clicked '+this._tweet_list)
      },
      error => {
        console.log('Error(Tweet list) : ' + error);
      }
    );
  }

  postRetweet(){
    this.apiService.postTweet(this.tweetId,localStorage.getItem('token'))
    .subscribe(
      response => {
        console.log(response);
      }
    );
  }

  Retweet(value:string){
    this.tweetId = value;
    this.postRetweet()
  }

  onEnter(value: string) { 
    this.getTweetList(this._searchItem+value+this._serachCount)
  }

  isTweetPopular(value:number,limit:number){
    return value > limit;
  }


  ngOnInit (){
    this.getAccessToken();
   }

}

и это моя html-сторона... на странице есть поле ввода для поиска, и вы вводите любые слова внутри, и вы нажимаете на ввод... он отправляет ваше слово в функцию onEnter(_query.value).. внутри этой функции, getTweetList() вызывается. после того, как вы получите успешный ответ, данные ответа будут присвоены this._tweet_list, а затем данные ответа должны быть показаны в таблице.

<!-- DataTales Example -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <input type="text" class="form-control" placeholder="Type and press enter.." aria-label="Type and press enter.."
      #_query (keyup.enter)="onEnter(_query.value)">
  </div>
  <div class="card-body">
    <div class="table-responsive">
        <pagination-controls (pageChange)="p = $event"></pagination-controls>

      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th># of RT</th>
            <th>User</th>
            <th>Description</th>
            <th>Tweet</th>
            <th>Action</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th># of RT</th>
            <th>User</th>
            <th>Description</th>
            <th>Tweet</th>
            <th>Action</th>
          </tr>
        </tfoot>
        <tbody>
          <ng-container *ngFor="let group of _tweet_list | keyvalue | paginate: { itemsPerPage: 10, currentPage: p }">
            <ng-container *ngIf="isTweetPopular(group.value.retweet_count,1)">
              <tr>
                <td>
                  <span class="badge badge-pill badge-primary">{{group.value.retweet_count}}</span>
                </td>
                <td>{{group.value.user.screen_name}}</td>
                <td>{{group.value.user.description}}</td>
                <td>{{group.value.text}}</td>

                <td style='white-space: nowrap'>
                  <ng-container *ngIf="group.value.user.url != null">
                    <a href={{group.value.user.url}} class="btn btn-outline-primary btn-sm" role="button"
                      aria-pressed="true">Profile Link</a>
                  </ng-container>
                  <a class="btn btn-outline-success btn-sm" role="button" aria-pressed="true" (click)="Retweet(group.value.id)">Retweet</a>
                </td>
              </tr>
            </ng-container>
          </ng-container>
        </tbody>
      </table>
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
    </div>
  </div>
</div>

<router-outlet></router-outlet>

Но полученные данные не загружаются в таблицу после нажатия на Enter.
Как таблица загружает результаты после ввода любых слов?

0 ответов

Другие вопросы по тегам