材料表角垫清单
我这里有这段代码，效果很好，当你点击放大镜时，它会打开一些信息：
<mat-card *ngIf="(bills && bills.length > 0) && all" style="overflow-x: auto;">
<mat-card-content>
<mat-card *ngFor="let bill of bills; let i = index;" style="margin-top:1%; margin-bottom: 1%;">
<mat-card-content>
<mat-list role="list">
<mat-list-item role="listitem" [ngClass]="{'section-active': bill.open, 'section':!bill.open}">
<table style="table-layout: fixed;">
<thead>
<tr>
<th style="width:7%">{{ 'fields.registrationDate' | translate }}</th>
<th style="width:10%">{{ 'fields.favored' | translate }}</th>
<th style="width:18%">{{ 'fields.descritive' | translate }}</th>
<th style="width:10%"> {{ 'fields.generatedIn' | translate }}</th>
<th style="width:6%">{{ 'fields.invoiceNumber' | translate }}</th>
<th style="width:5%">{{ 'fields.portions' | translate }}</th>
<th style="width:5%">Status</th>
<th style="width:8%">{{ 'fields.value' | translate }}</th>
<th style="width:8%">{{ 'fields.realizedValue' | translate }}</th>
<th style="width:7" >{{ 'fields.nextMaturity' | translate }}</th>
<th style="width:15%">{{ 'fields.actions' | translate }}</th>
</tr>
</thead>
<tbody>
<tr >
<td style="width:5%;" style="font-size: 12.5px;">{{ bill.dateInsert | date:'dd/MM/yyyy' }}</td>
<td style="font-size: 12.5px;" class="td10" [matTooltip]="bill.provider.name" >{{ bill.provider.name | limitTo: 22 }}</td>
<td style="font-size: 12.5px;" class="td22" [matTooltip]="bill.description">{{ bill.description | limitTo: 44 }}</td>
<td style="font-size: 12.5px;" class="td10"> {{ bill.generatedIn }}
<td style="width:3%;font-size: 12.5px;" >{{ bill.invoiceNumber }}</td>
<td style="width:5%;font-size: 12.5px;" >{{ bill.billInstallments.length }}</td>
<td style="width:5%;font-size: 12.5px;" *ngIf="bill.isPaid === true">
{{ 'fields.paid' | translate }}
</td>
<td style="width:5%;font-size: 12.5px;" *ngIf="bill.isPaid === false">
{{ 'fields.unpaid' | translate }}
</td>
<td style="width:8%" style="font-size: 12.5px;">
{{ bill.value | currency: bill.currency }}
</td>
<td style="width:8%" style="font-size: 12.5px;" [ngStyle]="(bill.value < bill.valueRealized) && bill.isPaid ? {'color': 'red'} : (bill.value > bill.valueRealized) && bill.isPaid ? {'color': 'green'} : {'color': 'black'}">
{{ bill.valueRealized | currency: bill.currency }}
</td>
<td style="width:5%" style="font-size: 12.5px;" *ngIf="bill.isPaid === true">{{ '-' }}</td>
<td style="width:5%" style="font-size: 12.5px;" *ngIf="bill.isPaid === false">{{ bill.nextMaturity | date:'dd/MM/yyyy'}}</td>
<td class="p-10" style="font-size: 19px;">
<div class="row">
<button mat-icon-button type="button" class="btn__view mr-1" (click)="toggleSection(i, bill)"
matTooltip="{{ 'button.view-parcels' | translate | uppercase }}">
<mat-icon>search</mat-icon>
</button>
<a *ngIf="(!allConstruction || bill.investor)">
<button *hasClaim="'MENU_BILLEXPENSE_WRITE'" mat-icon-button type="button"
class="btn__edit mr-1" (click)="handleEditItem(bill)"
matTooltip="{{ 'button.edit' | translate | uppercase }}">
<mat-icon>edit</mat-icon>
</button>
<button *hasClaim="'MENU_BILLEXPENSE_DELETE'" mat-icon-button type="button" class="btn__delete mr-1"
(click)="handleRemoveItem(bill)" matTooltip="{{ 'button.delete' | translate | uppercase }}">
<mat-icon>delete</mat-icon>
</button>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</mat-list-item>
<span class="child-list">
<mat-card *ngIf="bill && bill.open" style="margin-top:3%; margin-left:40%; margin-bottom: 1%;">
<!-- <mat-card-subtitle>
{{ 'fields.portions' | translate }}
</mat-card-subtitle> -->
<mat-card-content>
<table>
<thead>
<tr>
<th>{{ 'fields.portions' | translate }}</th>
<th>Status</th>
<th>{{ 'fields.dueDate' | translate }}</th>
<th>{{ 'fields.paymentDate' | translate }}</th>
<th>{{ 'fields.foreseenValue' | translate }}</th>
<th>{{ 'fields.realizedValue' | translate}}</th>
<th>{{ 'fields.actions' | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let billInstallments of bill.billInstallments; let j = index;">
<td>{{j+1}}</td>
<td *ngIf="billInstallments.isPaid === true">
{{ 'fields.paid' | translate }}
</td>
<td *ngIf="billInstallments.isPaid === false">
{{ 'fields.unpaid' | translate }}
</td>
<td>
{{ billInstallments.dueDate | date:'dd/MM/yyyy' }}
</td>
<td *ngIf="billInstallments.isPaid === true" [ngStyle]="(billInstallments.dueDate | date: 'dd/MM/yyyy') < (billInstallments.paymentDate | date: 'dd/MM/yyyy') ? {'color': 'red'} : {'color': 'black'}">
{{ billInstallments.paymentDate | date: 'dd/MM/yyyy' }}
</td>
<td style="text-align: center;" *ngIf="billInstallments.isPaid === false">
{{ '-' }}
</td>
<td>
{{ billInstallments.expectedValue | currency: bill.currency}}
</td>
<td [ngStyle]="billInstallments.expectedValue < billInstallments.realizedValue ? {'color': 'red'} : billInstallments.expectedValue > billInstallments.realizedValue && billInstallments.isPaid ? {'color': 'green'} : {'color': 'black'}">
{{ billInstallments.realizedValue | currency: bill.currency}}
</td>
<td class="p-10">
<span *hasClaim="'MENU_BILLEXPENSE_WRITE'" >
<button *ngIf="billInstallments.late === true && !billInstallments.isPaid" [disabled]="allConstruction && (bill.appropriate == true && !bill.investor)" mat-icon-button type="button"
class="btnBillsLate mr-1" (click)="handleLower(bill,j)"
matTooltip="{{ 'button.lower' | translate | uppercase }}">
<mat-icon>monetization_on</mat-icon>
</button>
<button *ngIf="billInstallments.late === false && !billInstallments.isPaid" [disabled]="allConstruction && (bill.appropriate == true && !bill.investor)" mat-icon-button type="button"
class="btnBillsInDay mr-1" (click)="handleLower(bill,j)"
matTooltip="{{ 'button.lower' | translate | uppercase }}">
<mat-icon>monetization_on</mat-icon>
</button>
<button *ngIf="billInstallments.isPaid" [disabled]="billInstallments.isPaid" mat-icon-button type="button"
class="btnBillsPay mr-1" (click)="handleLower(bill,j)"
matTooltip="{{ 'button.lower' | translate | uppercase }}">
<mat-icon>monetization_on</mat-icon>
</button>
</span>
</td>
</tr>
</tbody>
</table>
</mat-card-content>
</mat-card>
</span>
</mat-list>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
现在我只需要显示表格的标题一次，而不是按照整行重复。但是我无法正常工作，因为我需要继续单击展开数据，具体取决于图像.
我尝试过类似下面的方法，但一切都配置错误
<mat-card *ngIf="(bills && bills.length > 0) && all" style="overflow-x: auto;">
<mat-card-content>
<mat-card style="margin-top:1%; margin-bottom: 1%;">
<mat-card-content>
<mat-list role="list">
<table style="table-layout: fixed;">
<thead>
<tr>
<th style="width:7%">{{ 'fields.registrationDate' | translate }}</th>
<th style="width:10%">{{ 'fields.favored' | translate }}</th>
<th style="width:18%">{{ 'fields.descritive' | translate }}</th>
<th style="width:10%"> {{ 'fields.generatedIn' | translate }}</th>
<th style="width:6%">{{ 'fields.invoiceNumber' | translate }}</th>
<th style="width:5%">{{ 'fields.portions' | translate }}</th>
<th style="width:5%">Status</th>
<th style="width:8%">{{ 'fields.value' | translate }}</th>
<th style="width:8%">{{ 'fields.realizedValue' | translate }}</th>
<th style="width:7" >{{ 'fields.nextMaturity' | translate }}</th>
<th style="width:15%">{{ 'fields.actions' | translate }}</th>
</tr>
</thead>
<tbody>
<mat-list-item role="listitem" *ngFor="let bill of bills; let i = index;" [ngClass]="{'section-active': bill.open, 'section':!bill.open}">
<tr>
<td style="min-width:25%;" style="font-size: 12.5px;">{{ bill.dateInsert | date:'dd/MM/yyyy' }}</td>
<td style="font-size: 12.5px;" class="td10" [matTooltip]="bill.provider.name" >{{ bill.provider.name | limitTo: 22 }}</td>
<td style="font-size: 12.5px;" class="td22" [matTooltip]="bill.description">{{ bill.description | limitTo: 44 }}</td>
<td style="font-size: 12.5px;" class="td10"> {{ bill.generatedIn }}
<td style="width:3%;font-size: 12.5px;" >{{ bill.invoiceNumber }}</td>
<td style="width:5%;font-size: 12.5px;" >{{ bill.billInstallments.length }}</td>
<td style="width:5%;font-size: 12.5px;" *ngIf="bill.isPaid === true">
{{ 'fields.paid' | translate }}
</td>
<td style="width:5%;font-size: 12.5px;" *ngIf="bill.isPaid === false">
{{ 'fields.unpaid' | translate }}
</td>
<td style="width:8%" style="font-size: 12.5px;">
{{ bill.value | currency: bill.currency }}
</td>
<td style="width:8%" style="font-size: 12.5px;" [ngStyle]="(bill.value < bill.valueRealized) && bill.isPaid ? {'color': 'red'} : (bill.value > bill.valueRealized) && bill.isPaid ? {'color': 'green'} : {'color': 'black'}">
{{ bill.valueRealized | currency: bill.currency }}
</td>
<td style="width:5%" style="font-size: 12.5px;" *ngIf="bill.isPaid === true">{{ '-' }}</td>
<td style="width:5%" style="font-size: 12.5px;" *ngIf="bill.isPaid === false">{{ bill.nextMaturity | date:'dd/MM/yyyy'}}</td>
<td class="p-10" style="font-size: 19px;">
<div class="row">
<button mat-icon-button type="button" class="btn__view mr-1" (click)="toggleSection(i, bill)"
matTooltip="{{ 'button.view-parcels' | translate | uppercase }}">
<mat-icon>search</mat-icon>
</button>
<a *ngIf="(!allConstruction || bill.investor)">
<button *hasClaim="'MENU_BILLEXPENSE_WRITE'" mat-icon-button type="button"
class="btn__edit mr-1" (click)="handleEditItem(bill)"
matTooltip="{{ 'button.edit' | translate | uppercase }}">
<mat-icon>edit</mat-icon>
</button>
<button *hasClaim="'MENU_BILLEXPENSE_DELETE'" mat-icon-button type="button" class="btn__delete mr-1"
(click)="handleRemoveItem(bill)" matTooltip="{{ 'button.delete' | translate | uppercase }}">
<mat-icon>delete</mat-icon>
</button>
</a>
</div>
</td>
</tr>
</mat-list-item>
</tbody>
</table>
<span class="child-list">
<mat-card *ngIf="bill && bill.open" style="margin-top:3%; margin-left:40%; margin-bottom: 1%;">
<!-- <mat-card-subtitle>
{{ 'fields.portions' | translate }}
</mat-card-subtitle> -->
<mat-card-content>
<table>
<thead>
<tr>
<th>{{ 'fields.portions' | translate }}</th>
<th>Status</th>
<th>{{ 'fields.dueDate' | translate }}</th>
<th>{{ 'fields.paymentDate' | translate }}</th>
<th>{{ 'fields.foreseenValue' | translate }}</th>
<th>{{ 'fields.realizedValue' | translate}}</th>
<th>{{ 'fields.actions' | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let billInstallments of bill.billInstallments; let j = index;">
<td>{{j+1}}</td>
<td *ngIf="billInstallments.isPaid === true">
{{ 'fields.paid' | translate }}
</td>
<td *ngIf="billInstallments.isPaid === false">
{{ 'fields.unpaid' | translate }}
</td>
<td>
{{ billInstallments.dueDate | date:'dd/MM/yyyy' }}
</td>
<td *ngIf="billInstallments.isPaid === true" [ngStyle]="(billInstallments.dueDate | date: 'dd/MM/yyyy') < (billInstallments.paymentDate | date: 'dd/MM/yyyy') ? {'color': 'red'} : {'color': 'black'}">
{{ billInstallments.paymentDate | date: 'dd/MM/yyyy' }}
</td>
<td style="text-align: center;" *ngIf="billInstallments.isPaid === false">
{{ '-' }}
</td>
<td>
{{ billInstallments.expectedValue | currency: bill.currency}}
</td>
<td [ngStyle]="billInstallments.expectedValue < billInstallments.realizedValue ? {'color': 'red'} : billInstallments.expectedValue > billInstallments.realizedValue && billInstallments.isPaid ? {'color': 'green'} : {'color': 'black'}">
{{ billInstallments.realizedValue | currency: bill.currency}}
</td>
<td class="p-10">
<span *hasClaim="'MENU_BILLEXPENSE_WRITE'" >
<button *ngIf="billInstallments.late === true && !billInstallments.isPaid" [disabled]="allConstruction && (bill.appropriate == true && !bill.investor)" mat-icon-button type="button"
class="btnBillsLate mr-1" (click)="handleLower(bill,j)"
matTooltip="{{ 'button.lower' | translate | uppercase }}">
<mat-icon>monetization_on</mat-icon>
</button>
<button *ngIf="billInstallments.late === false && !billInstallments.isPaid" [disabled]="allConstruction && (bill.appropriate == true && !bill.investor)" mat-icon-button type="button"
class="btnBillsInDay mr-1" (click)="handleLower(bill,j)"
matTooltip="{{ 'button.lower' | translate | uppercase }}">
<mat-icon>monetization_on</mat-icon>
</button>
<button *ngIf="billInstallments.isPaid" [disabled]="billInstallments.isPaid" mat-icon-button type="button"
class="btnBillsPay mr-1" (click)="handleLower(bill,j)"
matTooltip="{{ 'button.lower' | translate | uppercase }}">
<mat-icon>monetization_on</mat-icon>
</button>
</span>
</td>
</tr>
</tbody>
</table>
</mat-card-content>
</mat-card>
</span>
</mat-list>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
1 个答案:
答案 0 :(得分：0)
我可以通过在代码中添加这部分来解决
<tr *ngIf="i == 0">
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？