#css #angular
#css #angular
Вопрос:
У меня здесь есть этот код, который отлично работает, и когда вы нажимаете на увеличительное стекло, он открывает некоторую информацию:
<mat-card *ngIf="(bills amp;amp; bills.length > 0) amp;amp; 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) amp;amp; bill.isPaid ? {'color': 'red'} : (bill.value > bill.valueRealized) amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; !billInstallments.isPaid" [disabled]="allConstruction amp;amp; (bill.appropriate == true amp;amp; !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 amp;amp; !billInstallments.isPaid" [disabled]="allConstruction amp;amp; (bill.appropriate == true amp;amp; !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 amp;amp; bills.length > 0) amp;amp; 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) amp;amp; bill.isPaid ? {'color': 'red'} : (bill.value > bill.valueRealized) amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; !billInstallments.isPaid" [disabled]="allConstruction amp;amp; (bill.appropriate == true amp;amp; !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 amp;amp; !billInstallments.isPaid" [disabled]="allConstruction amp;amp; (bill.appropriate == true amp;amp; !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. Если вы используете material angular, почему бы не использовать таблицу с расширяемой строкой (второй пример material.angular.io/components/table/examples ) ?
Ответ №1:
Я смог решить, добавив эту часть в код
<tr *ngIf="i == 0">