Блог

Главная - Вопросы по программированию - Заголовки столбцов таблицы, основанные на разных свойствах объекта, не выровнены в Angular с использованием Bootstrap

Заголовки столбцов таблицы, основанные на разных свойствах объекта, не выровнены в Angular с использованием Bootstrap

#html #css #angular #typescript #sass

#HTML #css #angular #typescript #sass

Вопрос:

Я создал объект с двумя свойствами person и vehicle, оба свойства состоят из массива данных. У меня есть 2 разных заголовка столбцов для свойств person и vehicle. Я отображаю данные этих 2 свойств в табличной форме. проблема в том, что заголовки столбцов для for обоих свойств не выровнены. кто-нибудь может мне помочь с этим?

 import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
personColumns = ["Name", " Age", "Department"];
vehicleColumns = ["Model", "Color", "Company"]
values = {
person: [
  {
    name: "John",
    age: 28,
    department: "Accounting"
  },
  {
    name: "Max",
    age: 26,
    department: "Sports"
  },
  {
    name: "Rose",
    age: 24,
    department: "Arts"
  }
],
vehicle: [
{
  model: "SEDAN",
  color: "Red",
  compay: "Mercedes"
},
{
  model: "COUPE",
  color: "White",
  compay: "BMW"
},
{
  model: "SUV",
  color: "Yellow",
  compay: "AUDI"
}
]
};
}

В component.html файл

 <div *ngIf="values != []">
<span *ngIf="values.person">
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th class="p-1" *ngFor="let column of personColumns">
          {{ column }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let value of values.person">
        <ng-container *ngIf="value.name != 'Max'">
          <td class="p-1">
            {{ value.name }}
          </td>
          <td class="p-1">
            {{ value.age }}
          </td>
          <td class="p-1">
            {{ value.department }}
          </td>
        </ng-container>
        <ng-container *ngIf="value.name == 'Max'">
          <td class="p-1">
            {{ value.name }}
          </td>
          <td class="p-1">
            {{ value.age }}
          </td>
          <td class="p-1">
            {{ value.department   " changed to"   " IT" }}
          </td>
        </ng-container>
      </tr>
    </tbody>
  </table>
</div>
</span>

<span *ngIf="values.vehicle">
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th class="p-1" *ngFor="let column of vehicleColumns">
          {{ column }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let value of values.vehicle">
        <ng-container *ngIf="value.model != 'SUV'">
          <td class="p-1">
            {{ value.model }}
          </td>
          <td class="p-1">
            {{ value.color }}
          </td>
          <td class="p-1">
            {{ value.compay }}
          </td>
        </ng-container>
        <ng-container *ngIf="value.model == 'SUV'">
          <td class="p-1">
            {{ value.model }}
          </td>
          <td class="p-1">
            {{ value.color }}
          </td>
          <td class="p-1">
            {{ value.compay   " changed to"   " Ford" }}
          </td>
        </ng-container>
      </tr>
    </tbody>
  </table>
</div>

В app.component.scss

 @import "../styles.scss";

.table thead th {
vertical-align: top;
}

th {
white-space: nowrap;
cursor: pointer;
user-select: none;
color: grey;
}

table {
margin: 0;
font-family: "Lato";
font-size: 12px;
}

.table-responsive {
 min-height: 60px;
}

.cell {
max-width: 250px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
}

.table thead th {
vertical-align: top;
}

введите описание изображения здесь

Комментарии:

1. Будет довольно сложно настроить центрирование этих значений, поскольку они имеют разную длину и взяты из разных таблиц. Что я бы посоветовал сделать, так это создать таблицу с несколькими заголовками или даже переместить таблицу в сторону, чтобы это выравнивание по центру вас больше не беспокоило.

Ответ №1:

Вам нужно использовать одну таблицу, чтобы сохранить одинаковую длину для каждого значения Пока вы можете использовать этот шаблон:

 <div *ngIf="values != []">
<span *ngIf="values.person">
    <div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th *ngFor="let column of personColumns">
                        {{ column }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let value of values.person">
                    <ng-container *ngIf="value.name != 'Max'">
                        <td>
                            {{ value.name }}
                        </td>
                        <td>
                            {{ value.age }}
                        </td>
                        <td>
                            {{ value.department }}
                        </td>
                    </ng-container>
                    <ng-container *ngIf="value.name == 'Max'">
                        <td>
                            {{ value.name }}
                        </td>
                        <td>
                            {{ value.age }}
                        </td>
                        <td>
                            {{ value.department   " changed to"   " IT" }}
                        </td>
                    </ng-container>
                </tr>
            </tbody>
            <thead *ngIf="values.vehicle">
                <tr>
                    <th *ngFor="let column of vehicleColumns">
                        {{ column }}
                    </th>
                </tr>
            </thead>
            <tbody *ngIf="values.vehicle">
                <tr *ngFor="let value of values.vehicle">
                    <ng-container *ngIf="value.model != 'SUV'">
                        <td>
                            {{ value.model }}
                        </td>
                        <td>
                            {{ value.color }}
                        </td>
                        <td>
                            {{ value.compay }}
                        </td>
                    </ng-container>
                    <ng-container *ngIf="value.model == 'SUV'">
                        <td>
                            {{ value.model }}
                        </td>
                        <td>
                            {{ value.color }}
                        </td>
                        <td>
                            {{ value.compay   " changed to"   " Ford" }}
                        </td>
                    </ng-container>
                </tr>
            </tbody>
        </table>
    </div>
 </span>

Добавьте классы начальной загрузки, включив это в index.html файл

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">