Различные данные в одном ряду

Question

У меня проблема с отображением разных данных в строку. Когда я получу данные и оберну их массивами. Но результат выглядит сломленным. Вот фрагмент:

<div class="table-responsive">
    <table
      class="table table-bordered"
      [ngStyle]="{ height: tableHeight + 'px' }"
    >
      <thead>
        <tr>
          <th>Цаг</th>
          <th>Үйлдлүүд</th>
          <th>Тасалбарууд</th>
          <th>Үйлчилгээ</th>
          <th>Гүйлгээ</th>
        </tr>
      </thead>
      <tbody [ngStyle]="{ height: tableHeight + 'px' }">
        <tr *ngFor="let event of events">
          <td>
            <div>
              <span class="mr-5">{{
                event?.createdAt | date: "hh:mm:ss"
              }}</span>
              <span class="mr-5"
                >{{ event?.type.kind }}
                {{ event?.type.item }}
                {{ event?.type.action }}
                {{
                  event?.type.kind == "TICKET" ? "-" + event?.ticketNumber : ""
                }}
              </span>
              <span class="mr-5">{{ event?.duration | secondToTime }}</span>
              <span class="mr-5"
                >{{ event?.hall }} - {{ event?.windowNumber }}</span
              >
            </div>
          </td>
        </tr>
        <tr *ngFor="let ticketEvent of ticketEvents">
          <td>
            <div>
              <span class="mr-5">{{
                ticketEvent?.calledAt | date: "hh:mm:ss"
              }}</span>
              <span class="mr-5">{{
                ticketEvent?.endAt | date: "hh:mm:ss"
              }}</span>
              <span class="mr-5">{{ ticketEvent?.number }}</span>
              <span class="mr-5">{{
                ticketEvent?.waitedDuration | secondToTime
              }}</span>
              <span class="mr-5">{{
                ticketEvent?.servedDuration | secondToTime
              }}</span>
              <span class="mr-5">{{
                ticketEvent?.introspectDuration | secondToTime
              }}</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Но мой результат:

Я хочу, чтобы данные были в одной строке, но содержали разные данные. Что я делаю не так?

Answer 1

Вы должны попробовать

<td>
    <div *ngFor="let event of events">
        <span class="mr-5">{{event?.createdAt | date: "hh:mm:ss"}}</span>
        <span>{{ event?.type.kind }}
        {{ event?.type.item }}
        {{ event?.type.action }}
        {{ event?.ticketNumber}}
        </span>
        <span class="mr-5">{{ event?.duration | secondToTime }}</span>
        <span class="mr-5"
        >{{ event?.hall }} - {{ event?.windowNumber }}</span>
    </div>
    <div *ngFor="let ticketEvent of ticketEvents">
        <span class="mr-5">{{
        ticketEvent?.calledAt | date: "hh:mm:ss"
        }}</span>
        <span class="mr-5">{{
        ticketEvent?.endAt | date: "hh:mm:ss"
        }}</span>
        <span class="mr-5">{{ ticketEvent?.number }}</span>
        <span class="mr-5">{{
        ticketEvent?.waitedDuration | secondToTime
        }}</span>
        <span class="mr-5">{{
        ticketEvent?.servedDuration | secondToTime
        }}</span>
        <span class="mr-5">{{
        ticketEvent?.introspectDuration | secondToTime
        }}</span>
    </div>
</td>

**

Answer 2

попробуй поместить это внутрь tr

<td>
    <span class="mr-5">
        {{event?.createdAt | date: "hh:mm:ss"}}
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.type.kind }}
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.type.item }}
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.type.action }}
    </span>
</td>
<td>
    <span class="mr-5">
        {{event?.type.kind == "TICKET" ? "-" + event?.ticketNumber : ""}}
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.duration | secondToTime }}    
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.hall }} - {{ event?.windowNumber }}   
    </span>
</td>