Таблица HTML, созданная с использованием * ngFor, заполненная отдельным * ngFor, последний столбец, содержащий * ngIf

Новое в переполнении стека и довольно новое в Angular - скажем, на промежуточном уровне.

Итак, у меня есть проблема, когда я использую цикл * ngFor для создания и заполнения первых трех столбцов таблицы HTML, а затем я хочу использовать отдельное условие * ngFor для цикла через коллекцию документов из базы данных firestore для заполнения строки таблицы, в которых выполняется определенное условие, до последнего столбца, в котором я хотел бы применить условие if для применения одного из двух вариантов содержания.

Сложно описывать просто словами, поэтому вот код, чтобы нарисовать лучшую картину:

JSON, используемый для создания таблицы HTML:

tables: any [] = [
    {
      'time': 1200,
      'number': 1,
      'covers': 2
    },
    {
      'time': 1200,
      'number': 2,
      'covers': 2
    },
    {
      'time': 1200,
      'number': 3,
      'covers': 2
    },
    {
      'time': 1230,
      'number': 1,
      'covers': 2
    },
    {
      'time': 1230,
      'number': 2,
      'covers': 2
    },
    {
      'time': 1230,
      'number': 3,
      'covers': 2
    },
    {
      'time': 1300,
      'number': 3,
      'covers': 2
    },
    {
      'time': 1300,
      'number': 1,
      'covers': 2
    },
    {
      'time': 1300,
      'number': 2,
      'covers': 2
    },
    {
      'time': 1300,
      'number': 3,
      'covers': 2
    }
    ];

Таблица HTML, где filterReservations - это массив коллекции документов, возвращаемых запросом на получение из хранилища:

    <table class="table">
            <thead>
            <th>Time</th>
            <th>Table</th>
            <th>Covers</th>
            <th>Name</th>
            <th>Contact</th>
            <th>Created By</th>
            <th>Status</th>
            <th>Actions</th>
            </thead>
            <tbody>
            <tr *ngFor="let table of tables">
              <td>{{table.time}}</td>
              <td>{{table.number}}</td>
              <ng-container *ngFor="let reservation of filteredReservations">
            <ng-container *ngIf="table.time == reservation.time && table.number == reservation.table">
              <td>{{reservation.covers}}</td>
              <td>{{reservation.name}}</td>
              <td>{{reservation.contact}}</td>
              <td>{{reservation.createdBy}}</td>
              <td>{{reservation.status}}</td>
              <ng-container>
                <td *ngIf="table.time == reservation.time && table.number == reservation.table; else empty">
                  <button mat-icon-button [routerLink]="['/new', reservation.id]">
                    <mat-icon>edit</mat-icon>
                  </button>
                </td>
              </ng-container>
            </ng-container>
          </ng-container>
            </tr>
            </tbody>
          </table>      
<ng-template #empty>
        <td>
          <button mat-icon-button [routerLink]="['/new']">
            <mat-icon>edit</mat-icon>
          </button>
        </td>
</ng-template>

Ожидаемый результат - таблица HTML будет создана с использованием первого * ngFor, отфильтрованные резервирования появятся в строках, где выполняется условие, а в последнем столбце будет отображаться значок редактирования, который будет ссылаться либо на добавление нового резервирования, либо на изменение существующего где условие выполнено.

Когда я пытаюсь достичь того, чего я стремлюсь, последний столбец повторяется столько раз, сколько есть документов в коллекции, т.е. мне нужно, чтобы последние столбцы находились за пределами цикла filterReservations, но все же использую данные резервирования для проверки условия if.

К чему я стремлюсь: 1

Что я сейчас получаю: 2

Я попытался объяснить как можно лучше, поэтому, надеюсь, это имеет смысл.


angular ngfor ng-template ng-container angular-ng-if
person enteryourname    schedule 26.02.2019    source источник
comment
Было бы очень полезно, если бы вы могли предоставить plunkr   -  person Arif    schedule 26.02.2019
comment
Мне кажется, что это потребует очень сложной логики, чтобы сохранить эти данные как есть. Вы можете подумать о преобразовании формата этих данных, создав некую группу по конвейеру (в Интернете есть много примеров), где вы можете сгруппировать каждую таблицу по резервированию, а затем ngFor reservations - ›ngFor таблицы по резервированию. Если я правильно понимаю, это похоже на то, что вы имеете в виду.   -  person Zircon    schedule 26.02.2019
comment
Я бы поставил <td><span*ngIf="*ngIf="table.time == reservation.time && table.number == reservation.table">{{reservation.covers}}</span></td> для всех столбцов   -  person Swoox    schedule 26.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я бы не стал делать итерацию в HTML. Предпочитайте делать это в component.ts:

 <tbody>
  <tr *ngFor="let table of tables" >
    <td>{{table.time}}</td>
    <td>{{table.number}}</td>
    <ng-template let-reservation="findReservation(table)">
      <td>{{reservation.covers}}</td>
      <td>{{reservation.name}}</td>
      <td>{{reservation.contact}}</td>
      <td>{{reservation.createdBy}}</td>
      <td>{{reservation.status}}</td>
      <td *ngIf="reservation">
        <button mat-icon-button [routerLink]="['/new', reservation.id]">
          <mat-icon>edit</mat-icon>
        </button>
      </td>
    </ng-template>    
  </tr>
</tbody>

И

findReservation(table: Table): Reservation {
  return this.filteredReservations.find(reservation => {/*your check*/})
}
person MoxxiManagarm    schedule 26.02.2019