c# - 修复 Angular 6 项目中的显示表

Question

我正在做一个结合使用 Angular 6、c# 和 MySQL 的小项目。我正试图同时显示来自两个不同 MySQL 表的数据，但我的格式设置一直被丢弃。每当我包括来自另一个表的调用时，它都会将借方和贷方标题推到一边。我正在尝试解决此问题，但不知道如何解决。

这是我将表格混在一起时不断得到的输出

试图获得与此类似的表格标题

这是我目前在代码中所做的事情。我有一个日志组件，其中显示了整个表格，而 css 上没有任何样式。

jr.component.html

<table class="table table-hover e-table">
  <thead>
  <tr>
    <th>Date</th>
    <th>Type</th>
    <th>Created By</th>
    <th>Account</th>
    <th>Debit</th>
    <th>Credit</th>
    <th>Description</th>
    <th>Status</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let transaction of viewTransactions">
    <tr>
      <td>{{transaction.createDate | date: 'M/d/yyyy'}}</td>
      <td>{{transactionType[transaction.type]}}</td>
      <td>{{transaction.createdBy.fullName}}</td>
      <!-- This is where other component is being pulled in -->
      <td><app-journal-entries-list [entries]="transaction.entries"></app-journal-entries-list></td>
      <td>{{transaction.description}}</td>
      <td class="text-center align-middle">
        <span class="d-block" *ngIf="!canUserPost() || transaction.status != transactionStatusType.Pending"
        [ngClass]="{'text-dark': transaction.status == transactionStatusType.Pending, 'text-success': transaction.status == transactionStatusType.Approved, 'text-danger': transaction.status == transactionStatusType.Rejected}">{{transactionStatusType[transaction.status]}}</span>
        <div *ngIf="canUserPost() && transaction.status == transactionStatusType.Pending">
          <button class="btn btn-dark w-100 mb-3" data-toggle="modal" data-target="#modal-resolve-journal-entry" [attr.data-approve]="true" [attr.data-transaction]="transaction.id">Approve</button>
          <button class="btn btn-dark w-100" data-toggle="modal" data-target="#modal-resolve-journal-entry" [attr.data-approve]="false" [attr.data-transaction]="transaction.id">Reject</button>
        </div>
      </td>
    </tr>
  </ng-container>
  </tbody>
</table>

这是从第二个 MySQL 表中提取信息的另一个组件。这里的 css 也没有样式

jre.component.html

<table class="table entries-table">
  <tr *ngFor="let entry of getDebits()">
    <td>{{entry.account.name}}</td>
    <td>{{entry.amount | currency}}</td>
    <td></td>
  </tr>
  <tr *ngFor="let entry of getCredits()">
    <td> {{entry.account.name}}</td>
    <td></td>
    <td>{{entry.amount | currency}}</td>
 </tr>
</table>

Answer 1

这是有道理的。您正在创建一个新的 td，其内容由一个新表填充并占用所需的空间。

您真正需要做的是合并初始数据源中的信息。

您可以传递 entry 而不是组件中的条目，而不是创建新表使用新值更新条目的值并像处理已经创建的值一样显示它们.