Получить данные из твиттера и загрузить в таблицу в 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.
Как таблица загружает результаты после ввода любых слов?