1

スタックオーバーフローは初めてで、Angular はかなり新しい - 中級レベルと言います。

したがって、* ngFor ループを使用して HTML テーブルの最初の 3 つの列を作成および入力するという問題があり、別の * ngFor 条件を使用して、firestore データベースからのドキュメントのコレクションをループして入力したいと考えています。特定の条件が満たされたテーブルの行から、コンテンツの 2 つのオプションのいずれかを適用するためにif条件を適用する最後の列まで。

言葉だけで説明するのは混乱するので、より良い絵を描くためのコードを次に示します。

HTML テーブルの作成に使用される JSON:

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
    }
    ];

filteredReservations が firestore get リクエストによって返されるドキュメントのコレクションの配列である HTML テーブル:

    <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 を使用して作成され、filteredReservations が条件が満たされた行に表示され、最後の列に編集アイコンが表示され、新しい予約を追加するか、既存の場所を編集するリンクが表示されることです。条件が満たされます。

私が目指していることを達成しようとすると、最後の列がコレクション内のドキュメントの数だけ繰り返されます。つまり、最後の列がfilteredReservationsループの外にある必要がありますが、予約データを使用してif条件を確認します。

目指しているもの：1

私が現在得ているもの：2

私はできる限り最善を尽くして説明しようとしたので、うまくいけばこれは理にかなっています。

4

1 に答える 1