输入搜索查询后,我正在从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面。.页面中有搜索输入字段,您在其中键入任何单词,然后单击Enter ..它会将您的单词发送给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后,未将获取的数据加载到表中。.
键入任何单词后,表格如何加载结果?