Jhipster 关系未反映在 Angular 前端

Question

我创建了一个包含三个实体的应用程序：

员工

    {
  "fields": [
    {
      "fieldName": "name",
      "fieldType": "String"
    },
    {
      "fieldName": "designation",
      "fieldType": "String"
    }
  ],
  "relationships": [
    {
      "relationshipName": "testTeam",
      "otherEntityName": "testTeam",
      "relationshipType": "many-to-many",
      "otherEntityField": "id",
      "ownerSide": true,
      "otherEntityRelationshipName": "employee"
    }
  ],
  "service": "serviceImpl",
  "dto": "no",
  "jpaMetamodelFiltering": false,
  "readOnly": false,
  "pagination": "pagination",
  "name": "Employee",
  "changelogDate": "20210803173926"
}

项目

{
  "fields": [
    {
      "fieldName": "name",
      "fieldType": "String"
    },
    {
      "fieldName": "projectId",
      "fieldType": "String"
    }
  ],
  "relationships": [
    {
      "relationshipName": "testTeam",
      "otherEntityName": "testTeam",
      "relationshipType": "many-to-one",
      "otherEntityField": "id"
    }
  ],
  "service": "serviceImpl",
  "dto": "no",
  "jpaMetamodelFiltering": false,
  "readOnly": false,
  "pagination": "pagination",
  "name": "Projects",
  "changelogDate": "20210803174304"
}

团队

{
  "fields": [],
  "relationships": [
    {
      "relationshipName": "employee",
      "otherEntityName": "employee",
      "relationshipType": "many-to-many",
      "ownerSide": false,
      "otherEntityRelationshipName": "testTeam"
    },
    {
      "relationshipName": "projects",
      "otherEntityName": "projects",
      "relationshipType": "one-to-many",
      "otherEntityRelationshipName": "testTeam"
    }
  ],
  "service": "serviceImpl",
  "dto": "no",
  "jpaMetamodelFiltering": false,
  "readOnly": false,
  "pagination": "pagination",
  "name": "TestTeam",
  "changelogDate": "20210803174127"
}

由于团队和项目之间存在一对多关系，而团队和员工，我的假设是 Team 前端将显示与其相关的用户和项目列表。相反，该表完全空白，“创建团队”按钮仅显示 团队 表的 ID：

1. 我需要进行哪些更改才能在前端列表中显示与团队相关的员工和项目列表？
2. 我希望能够从团队条目/编辑页面中选择要链接到团队的用户和项目列表。我该怎么做？

编辑：TestTeam component.ts

import { Component, OnInit } from '@angular/core';
import { HttpHeaders, HttpResponse } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { combineLatest } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { ITestTeam } from '../test-team.model';

import { ASC, DESC, ITEMS_PER_PAGE, SORT } from 'app/config/pagination.constants';
import { TestTeamService } from '../service/test-team.service';
import { TestTeamDeleteDialogComponent } from '../delete/test-team-delete-dialog.component';

@Component({
  selector: 'jhi-test-team',
  templateUrl: './test-team.component.html',
})
export class TestTeamComponent implements OnInit {
  testTeams?: ITestTeam[];
  isLoading = false;
  totalItems = 0;
  itemsPerPage = ITEMS_PER_PAGE;
  page?: number;
  predicate!: string;
  ascending!: boolean;
  ngbPaginationPage = 1;

  constructor(
    protected testTeamService: TestTeamService,
    protected activatedRoute: ActivatedRoute,
    protected router: Router,
    protected modalService: NgbModal
  ) {}

  loadPage(page?: number, dontNavigate?: boolean): void {
    this.isLoading = true;
    const pageToLoad: number = page ?? this.page ?? 1;

    this.testTeamService
      .query({
        page: pageToLoad - 1,
        size: this.itemsPerPage,
        sort: this.sort(),
      })
      .subscribe(
        (res: HttpResponse<ITestTeam[]>) => {
          this.isLoading = false;
          this.onSuccess(res.body, res.headers, pageToLoad, !dontNavigate);
        },
        () => {
          this.isLoading = false;
          this.onError();
        }
      );
  }

  ngOnInit(): void {
    this.handleNavigation();
  }

  trackId(index: number, item: ITestTeam): number {
    return item.id!;
  }

  delete(testTeam: ITestTeam): void {
    const modalRef = this.modalService.open(TestTeamDeleteDialogComponent, { size: 'lg', backdrop: 'static' });
    modalRef.componentInstance.testTeam = testTeam;
    // unsubscribe not needed because closed completes on modal close
    modalRef.closed.subscribe(reason => {
      if (reason === 'deleted') {
        this.loadPage();
      }
    });
  }

  protected sort(): string[] {
    const result = [this.predicate + ',' + (this.ascending ? ASC : DESC)];
    if (this.predicate !== 'id') {
      result.push('id');
    }
    return result;
  }

  protected handleNavigation(): void {
    combineLatest([this.activatedRoute.data, this.activatedRoute.queryParamMap]).subscribe(([data, params]) => {
      const page = params.get('page');
      const pageNumber = page !== null ? +page : 1;
      const sort = (params.get(SORT) ?? data['defaultSort']).split(',');
      const predicate = sort[0];
      const ascending = sort[1] === ASC;
      if (pageNumber !== this.page || predicate !== this.predicate || ascending !== this.ascending) {
        this.predicate = predicate;
        this.ascending = ascending;
        this.loadPage(pageNumber, true);
      }
    });
  }

  protected onSuccess(data: ITestTeam[] | null, headers: HttpHeaders, page: number, navigate: boolean): void {
    this.totalItems = Number(headers.get('X-Total-Count'));
    this.page = page;
    if (navigate) {
      this.router.navigate(['/test-team'], {
        queryParams: {
          page: this.page,
          size: this.itemsPerPage,
          sort: this.predicate + ',' + (this.ascending ? ASC : DESC),
        },
      });
    }
    this.testTeams = data ?? [];
    this.ngbPaginationPage = this.page;
  }

  protected onError(): void {
    this.ngbPaginationPage = this.page ?? 1;
  }
}

TestTeam 组件 html

<div>
  <h2 id="page-heading" data-cy="TestTeamHeading">
    <span>Test Teams</span>

    <div class="d-flex justify-content-end">
      <button class="btn btn-info mr-2" (click)="loadPage()" [disabled]="isLoading">
        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
        <span>Refresh List</span>
      </button>

      <button
        id="jh-create-entity"
        data-cy="entityCreateButton"
        class="btn btn-primary jh-create-entity create-test-team"
        [routerLink]="['/test-team/new']"
      >
        <fa-icon icon="plus"></fa-icon>
        <span> Create a new Test Team </span>
      </button>
    </div>
  </h2>

  <jhi-alert-error></jhi-alert-error>

  <jhi-alert></jhi-alert>

  <div class="alert alert-warning" id="no-result" *ngIf="testTeams?.length === 0">
    <span>No testTeams found</span>
  </div>

  <div class="table-responsive" id="entities" *ngIf="testTeams && testTeams.length > 0">
    <table class="table table-striped" aria-describedby="page-heading">
      <thead>
        <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" [callback]="loadPage.bind(this)">
          <th scope="col" jhiSortBy="id"><span>ID</span> <fa-icon icon="sort"></fa-icon></th>
          <th scope="col" jhiSortBy="hnap"><span>Hnap</span> <fa-icon icon="sort"></fa-icon></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let testTeam of testTeams; trackBy: trackId" data-cy="entityTable">
          <td>
            <a [routerLink]="['/test-team', testTeam.id, 'view']">{{ testTeam.id }}</a>
          </td>
          <td>{{ testTeam.hnap }}</td>
          <td class="text-right">
            <div class="btn-group">
              <button
                type="submit"
                [routerLink]="['/test-team', testTeam.id, 'view']"
                class="btn btn-info btn-sm"
                data-cy="entityDetailsButton"
              >
                <fa-icon icon="eye"></fa-icon>
                <span class="d-none d-md-inline">View</span>
              </button>

              <button
                type="submit"
                [routerLink]="['/test-team', testTeam.id, 'edit']"
                class="btn btn-primary btn-sm"
                data-cy="entityEditButton"
              >
                <fa-icon icon="pencil-alt"></fa-icon>
                <span class="d-none d-md-inline">Edit</span>
              </button>

              <button type="submit" (click)="delete(testTeam)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
                <fa-icon icon="times"></fa-icon>
                <span class="d-none d-md-inline">Delete</span>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div *ngIf="testTeams && testTeams.length > 0">
    <div class="row justify-content-center">
      <jhi-item-count [params]="{ page: page, totalItems: totalItems, itemsPerPage: itemsPerPage }"></jhi-item-count>
    </div>

    <div class="row justify-content-center">
      <ngb-pagination
        [collectionSize]="totalItems"
        [(page)]="ngbPaginationPage"
        [pageSize]="itemsPerPage"
        [maxSize]="5"
        [rotate]="true"
        [boundaryLinks]="true"
        (pageChange)="loadPage($event)"
      ></ngb-pagination>
    </div>
  </div>
</div>

Answer 1

在您显示的 HTML 文件中，您需要添加所需的列。

例如：

<th scope="col" jhiSortBy="Project"><span>Project</span> <fa-icon icon="sort"></fa-icon></th>
....

<td>{{ testTeam.project }}</td>

只有在您确定在 TestTeam 模型中设置项目和员工时，您才能调用它们。一般可以在shared/model/testTeam.model.ts下找到型号

这只是前端部分。如果这对您没有帮助，您可能应该尝试按照 Angular 和 JHipster 的分步教程进行操作。