Question

通常，我会在卡片中列出某些条目。如果单击卡上的记录之一，则属于该记录的数据表将显示在该记录下方。

我的问题是，单击所选卡上的记录后，将显示一个包含数据的表。所有表格也都显示在其他卡上，尽管我什至没有点击。

html：

<div class="col-sm-12" *ngFor="let commitment of filteredCommitments " (click)="onSelectedReportingDate(commitment.commitment_id)" >
    <div class="card card-product">
        <div class="card-content">
            <div class="card-description" [innerHTML]="commitment.commitment_text">
                {{commitment.commitment_text}}
            </div>
            <div *ngIf="selectedCommitment">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th style="text-align:left; font-size: 10px;">Execution time</th>
                            <th style="text-align:left; font-size: 10px;">Status</th>
                            <th style="text-align:left; font-size: 10px;">Status comment</th>
                            <th style="text-align:right; font-size: 10px;">Documentation</th>
                            <th style="text-align:right; font-size: 10px;">Date of preparation</th>
                        </tr>
                    </thead>
                    <tbody style="cursor: pointer;">
                        <tr *ngFor="let reportingDate of filteredReportingDates">
                            <td style="text-align:left; font-size: 10px;">{{ reportingDate.reportingdate_plan }}</td>
                            <td style="text-align:left; font-size: 10px;">{{ reportingDate.commitment_status_name }}</td>
                            <td style="text-align:left; font-size: 10px;" [innerHTML]="reportingDate.report_text"> {{ reportingDate.report_text }}</td>
                            <td style="text-align:right; font-size: 10px;">{{ reportingDate.file_name }}</td>
                            <td style="text-align:right; font-size: 10px;">{{ reportingDate.reportingdate_fakt }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

ts：

commitments: Array<SprLiability>;

selectedCommitment = null;
reportingDates: Array<ReportingDate>
filteredReportingDates = [];

onSelectedReportingDate(commitmentId) {
  this.selectedCommitment = this.commitments.find(
    el => {
      return el.commitment_id === commitmentId
    }
  );

  let filteredReportingDates;
  if (this.servReportingDate) {
    this.servReportingDate.getReportingDates().subscribe(
      reportingDate => {
        this.reportingDates = reportingDate;
        this.filteredReportingDates = this.reportingDates.filter(
          (reportingDate) => reportingDate.l_liabilitys_id == this.selectedCommitment.commitment_id
        );
      }
    );
  }
}

Answer 1

更新代码：从 <div *ngIf="selectedCommitment">至

<div *ngIf="selectedCommitment.commitment_id == commitment.commitment_id ">

仅当选定的commit_id仅与filteredCommitments数组中的commit_id匹配时，表格才会显示。

希望这对您有帮助！

如何显示所选数据？

1 个答案: