[英]Angular 6: No data to display
我使用ngx-datable创建了一个表,这里是链接: https ://swimlane.gitbook.io/ngx-datatable/getting-started这里是我所拥有的
HTML:
<ngx-datatable
#table
class='material'
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[sortType]="'multi'"
[rowHeight]="'auto'"
[limit]="10"
[rows]='rows'>
<ngx-datatable-column name="poster_path">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="name">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="id">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="overview">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
这是component.ts
import { Component, ViewChild } from '@angular/core';
import { MoviesService } from '../movies.service';
@Component({
selector: 'app-tv-shows',
templateUrl: './tv-shows.component.html',
styleUrls: ['./tv-shows.component.scss']
})
export class TvShowsComponent {
tvShowList: any;
listFilter: '';
rows = [];
columns = [
{ prop: 'name' },
{ name: 'Id' },
{ name: 'Overview' }
];
temp = [];
constructor(private moviesService: MoviesService) {
this.moviesService.getPopularTVShows().subscribe(res => {
this.tvShowList = res.results;
this.rows = res.results;
console.log(this.rows);
});
}
updateFilter(event) {
const val = event.target.value.toLowerCase();
// filter our data
const temp = this.temp.filter(function(d) {
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
});
// update the rows
this.rows = temp;
}
}
这是我在首页显示的api数据
"results": [
{
"original_name": "The Big Bang Theory",
"genre_ids": [
35
],
"name": "The Big Bang Theory",
"popularity": 292.963,
"origin_country": [
"US"
],
"vote_count": 3039,
"first_air_date": "2007-09-24",
"backdrop_path": "/nGsNruW3W27V6r4gkyc3iiEGsKR.jpg",
"original_language": "en",
"id": 1418,
"vote_average": 6.8,
"overview": "The Big Bang Theory is centered on five characters living in Pasadena,
"poster_path": "/ooBGRQBdbGzBxAVfExiO8r7kloA.jpg"
},
题
当我运行我的应用程序并尝试过滤表中的一些数据(包含数据)时,它说没有要显示的数据?
表示我的过滤器根本不起作用。
同时不返回带有下划线名称的数据,例如
first_air_date等
尝试向HTML添加column属性,如下所示:
<ngx-datatable
[columns] = "[
{ name: 'Id', prop: 'id' },
{ name: 'Overview', prop: 'overview' }
]">
</ngx-datatable>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.