修复 Angular 6 项目中的显示表答案

【问题标题】：Fixing up display tables in an Angular 6 project修复 Angular 6 项目中的显示表
【发布时间】：2020-04-02 15:21:27
【问题描述】：

我正在做一个使用 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>

【问题讨论】：

标签： c# mysql angular bootstrap-4 angular6

【解决方案1】：

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

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

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

【讨论】：