- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 ngx-admin 模板,但我想添加 Mat-Table 和 Mat-Paginator,因此我正在导入 @angular/material 模块。下面是我的代码:
transaction.module.ts
....
import {
MatTooltipModule,
MatRippleModule,
MatButtonModule,
MatSelectModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
} from '@angular/material';
@NgModule({
imports: [
CommonModule,
NbCardModule,
NbIconModule,
NbInputModule,
ThemeModule,
TransactionRoutingModule,
NbInputModule,
NbCardModule,
NbButtonModule,
NbActionsModule,
NbUserModule,
NbCheckboxModule,
NbRadioModule,
NbDatepickerModule,
NbSelectModule,
NbIconModule,
ngFormsModule,
ReactiveFormsModule,
MatTooltipModule,
MatRippleModule,
MatButtonModule,
MatSelectModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
],
declarations: [
...routedComponents,
],
})
transaction.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TransactionComponent } from './transaction.component';
import { TransactionListComponent } from './list/transaction-list.component';
import { TransactionAddComponent } from './add/transaction-add.component';
const routes: Routes = [{
path: '',
component: TransactionComponent,
children: [
{
path: 'list',
component: TransactionListComponent,
},
{
path: 'add',
component: TransactionAddComponent,
},
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TransactionRoutingModule { }
export const routedComponents = [
TransactionComponent,
TransactionListComponent,
TransactionAddComponent,
];
transaction/list/transaction-list.component.ts
resultList: Transaction[] = [];
dataSource: MatTableDataSource<Transaction>;
displayedColumns: string[] = ['date', 'category_name', 'description', 'debit', 'credit'];
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private transService: TransactionData) {}
ngAfterViewInit() {
this.transService.getTransactionData().subscribe(
(res: Transaction[]) => {
this.resultList = res;
this.dataSource = new MatTableDataSource(this.resultList);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
err => {
console.log(err);
}
)
}
transaction/list/transaction-list.html
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- Date Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let element"> {{ element.date | date: 'dd MMM yyyy' }} </td>
</ng-container>
<!-- Category Column -->
<ng-container matColumnDef="category_name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Category </th>
<td mat-cell *matCellDef="let element"> {{ element.category_name }} </td>
</ng-container>
<!-- Description Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
<td mat-cell *matCellDef="let element"> {{ element.description }} </td>
</ng-container>
<!-- Debit Column -->
<ng-container matColumnDef="debit">
<th mat-header-cell *matHeaderCellDef class="text-right"> Debit </th>
<td mat-cell *matCellDef="let element" class="text-right"> {{ (element.type =='Out') ? (element.amount | number: '1.2-2') : ''}} </td>
</ng-container>
<!-- Credit Column -->
<ng-container matColumnDef="credit">
<th mat-header-cell *matHeaderCellDef class="text-right"> Credit </th>
<td mat-cell *matCellDef="let element" class="text-right"> {{ (element.type =='In') ? (element.amount | number: '1.2-2') : ''}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="pagination-div">
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 50]"></mat-paginator>
</div>
表格工作正常,但是分页器页面选择器无法选择。它向我抛出如下错误:
ERROR TypeError: Cannot read property 'pipe' of undefined
at MatSelect.ngAfterContentInit (select.js:678)
at callHook (core.js:3937)
at callHooks (core.js:3901)
at executeInitAndCheckHooks (core.js:3842)
at refreshView (core.js:11819)
at refreshDynamicEmbeddedViews (core.js:13142)
at refreshView (core.js:11800)
at refreshDynamicEmbeddedViews (core.js:13142)
at refreshView (core.js:11800)
at refreshComponent (core.js:13217)
最佳答案
添加{static: false}
@ViewChild(MatPaginator, { static: false }) 分页器:MatPaginator;
关于angular - 使用 Mat-Paginator 时无法读取未定义的属性 'pipe',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61241531/
除了语法之外,在 CakePHP 2 中使用 $this->paginate() 和 $this->Paginator->paginate() 之间有什么区别? 使用其中一种比另一种有什么优势吗? 最
我正在使用 magento 1.7。在我的主页中,每个类别都有分页,分页出现在每个类别的顶部和底部。我想从顶部删除分页并在底部保留分页。 为了包括分页,我使用了以下代码, CMS > 页面 > 设计
我想在 Pagination::slider View 中做一些更改,例如添加类和更改箭头样式。我怎样才能做到这一点? 最佳答案 您可以通过调整 app/config/view.php 中的配置选项来
我是 angularjs 的新手。我正在使用 https://angular-ui.github.io/bootstrap/#/pagination .我有一些问题:style class="pagi
我看过this和this question。但是我仍然无法为存储库方法设置页面调度。不知道我是否受到错误的影响或只是没有正确编写此内容。基本上,我在问是否有人可以提供一个示例,说明如何对通过@Repo
我正在尝试使用 ng2-bootrap 在我的 angular2 应用程序中实现分页。我正在关注 http://valor-software.github.io/ng2-bootstrap/#pagi
我正在使用 flask-paginate 显示一些 rss 提要,分页工作正常,但 pagination.links 的样式不正确,它看起来像一个项目符号列表。在 stackoverflow 上有一个
我正在尝试详细阐述一种在分页模板和非分页模板之间切换的智能方法。 我已经有一个可用的分页器,我正在考虑在它旁边添加一个按钮,上面写着“显示所有结果”,链接到非分页列表,然后从那里会有另一个按钮返回到分
我正在使用 dir-pagination 指令进行分页,它工作正常,但在过滤分页时没有得到更新 下面是我的代码: {{booking.customer
我有一个大查询(在我的查询构建器中)和很多左连接。所以我得到了带有评论和标签等的文章。 假设我有以下 dql: $dql = 'SELECT blogpost, comment, tags FROM
我有一个这样的 ViewSet 来列出用户的数据: class Foo(viewsets.ViewSet): def list(self, request): queryset
我是 Angular 的新手,我想知道是否有任何方法可以将 ngFor 循环递增 2 而不是 1。 我正在尝试在需要将循环递增 2 的分页中实现两个分页。 我得到的对象中包含对象。比方说用户及其地址列
摘要 嗨,大家好!在这个问题中,我想请教您在仅从 material-ui 中导入父组件时如何设置子组件的样式。 问题 我想覆盖从 Material-UI 导入的分页项的类。我只是从 Material-
我正在创建 SharePoint Web 部件,每当我使用新的附加分页组件在 IE 中部署 Web 部件时,我都会收到此错误: 这是我的 MainController.js 文件: (function
无限滚动 next js不工作,相同的代码正常工作 create-react-app 最佳答案 与正常情况不同 React Js , 无限滚动 NextJs有不同的方法。这里我们将使用一个名为 rea
我必须实现基于游标的分页,并且我对如何实现这一点感到有点困惑,因为我的实体的主键不是自动增量,例如 Aerospike。 当比较运算符在我们不使用自动递增的分布式系统中的主键上不可用时,最明显的替代方
我能够使用 skip、limit(和 order by)来获取 UI 中特定页面的内容。例如。呈现页面大小为 m 的第 n 页。 UI 要求跳过 n*m 并限制 m。 但是,UI 想要为所有可能的页面
我有一个Excel工作表,其大小为100行和10列。 如何将这个Excel工作表保存到MS Word文档中,例如: 单词doc中的每个页面必须包含一张来自excel工作表的连续25行的表。 (第一页包
面包屑链接有一个微数据:http://www.data-vocabulary.org/Breadcrumb/ 但是页面链接是否有类似的微数据,例如: [] 最佳答案 是的,还有 pagination
我有存储在图形数据库中的事件。在某些情况下,多个事件被分组并聚合为 1 个事件。 处理后的事件提要可能如下所示: Activity 1 Activity 2 Grouped Activity Ac
我是一名优秀的程序员,十分优秀!