angular - 可扩展数据表上的 Angular 7 材料错误
问题描述
我正在努力解决以下问题:
我希望我的发票表可以像https://v7.material.angular.io/components/table/examples一样扩展(滚动到可扩展行的表)
当我复制粘贴完全相同的代码时,它工作得很好。但是当我尝试将此代码应用于我的发票组件时,我会收到以下错误:
错误:只有一个默认行没有 when 谓词函数。在 getTableMultipleDefaultRowDefsError
我的 .html 代码:
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource" mutliTemplateDataRows>
<ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let invoice"> {{invoice[column]}} </td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let invoice" [attr.colspan]="displayedColumns.length">
<div [@detailExpand]="invoice == expandedElement ? 'expanded' : 'collapsed'">
THIS IS WHAT I WANT TO SHOW WHEN EXPANDED
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let invoice; columns: displayedColumns;"
(click)="expandedElement = expandedElement === invoice ? null : invoice">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
这与 Angular 材料网站上的教程基本相同:
<table mat-table
[dataSource]="dataSource" multiTemplateDataRows
class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="example-element-diagram">
<div class="example-element-position"> {{element.position}} </div>
<div class="example-element-symbol"> {{element.symbol}} </div>
<div class="example-element-name"> {{element.name}} </div>
<div class="example-element-weight"> {{element.weight}} </div>
</div>
<div class="example-element-description">
{{element.description}}
<span class="example-element-description-attribution"> -- Wikipedia </span>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
那么为什么我在自己的 invoices.html 文件中出现错误,而不是在本教程的示例中呢?在这两个代码中,我有相同的<tr>
逻辑,对吗?此外,当我删除最后两<tr>
行之一时,错误消失了。
这是我在 invoices.component 中的代码:
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Invoice } from './invoice';
import { invoiceService } from './invoice.service';
import { animate, state, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'app-invoices',
templateUrl: './invoices.component.html',
styleUrls: ['./invoices.component.scss'],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class InvoicesComponent implements OnInit {
displayedColumns: string[] = ['reference', 'shipmentCosts', 'expectedShipmentCosts', 'containerCosts', 'expectedContainerCosts', 'shipmentDifference', 'containerDifference'];
expandedElement: Invoice | null;
incorrectInvoices: Invoice[] = [];
dataSource = new MatTableDataSource();
constructor(private invoiceService: invoiceService) { }
ngOnInit() {
this.invoiceService.getIncorrectInvoices().subscribe(data => {
this.incorrectInvoices = data;
this.dataSource.data = this.incorrectInvoices
});
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
希望可以有人帮帮我!
解决方案
感谢 Nexaddo 的评论,我找到了原因。中的错字mutliTemplateDataRows
,应该是multiTemplateDataRows
推荐阅读
- python - 如何在 SUMO 的连续运行中处理以 TIME 前缀开头的 xml 文件
- sql - Postgresql 查询“任何”运算符
- excel - VBA比较行,如果相同则计数
- javascript - 如何在ajax外调用Ajax Success的函数
- django - 我想编辑管理面板,该面板仅以特定的员工用户项目列表打开,并且不想与同一张表中的 TabularInline 妥协
- c# - C# AWS - 如何在 c# 中动态确定 AWS 区域终端节点
- gitlab - Gitlab-ci 使用已经存在的数据启动数据库服务
- c++ - 如何制作一个接受另一个带有参数元组的函数
- opencv - 函数“hog.detectMultiScale(frame)”不返回任何东西
- logging - Apache Camel (2.11.2) - 特定路由的日志级别调试