我是jHipster的新手。我生成了一个新项目，并创建了2个实体-客户及其访问。我想实现以下功能： 在客户详细信息页面的底部，将显示他的所有访问。 我将为您提供建议和手册链接。 谢谢！ This is part of project structure
client-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IClient } from 'app/shared/model/client.model';
import {VisitComponent} from "app/entities/visit";
@Component({
selector: 'jhi-client-detail',
templateUrl: './client-detail.component.html'
})
export class ClientDetailComponent implements OnInit {
client: IClient;
visitList: VisitComponent;
constructor(protected activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.activatedRoute.data.subscribe(({ client,visitList }) => {
this.client = client;
this.visitList = visitList;
});
}
previousState() {
window.history.back();
}
}
client-detail.component.html
<div class="row justify-content-center" xmlns:trackBy="http://www.w3.org/1999/xhtml">
<div class="col-8">
<div *ngIf="client">
<h2><span>Client</span> {{client.id}}</h2>
<hr>
<jhi-alert-error></jhi-alert-error>
<dl class="row-md jh-entity-details">
<dt><span>Name</span></dt>
<dd>
<span>{{client.name}}</span>
</dd>
<dt><span>Birth Date</span></dt>
<dd>
<span>{{client.birthDate}}</span>
</dd>
<dt><span>Phone Number</span></dt>
<dd>
<span>{{client.phoneNumber}}</span>
</dd>
</dl>
<button type="submit"
(click)="previousState()"
class="btn btn-info">
<fa-icon [icon]="'arrow-left'"></fa-icon> <span> Back</span>
</button>
<button type="button"
[routerLink]="['/client', client.id, 'edit']"
class="btn btn-primary">
<fa-icon [icon]="'pencil-alt'"></fa-icon> <span> Edit</span>
</button>
<div class="footer">
<p>Start Visit List</p>
</div>
<div class="table-responsive" *ngIf="visitList">
<table class="table table-striped">
<thead>
<tr jhiSort [(predicate)]="visitList.predicate" [(ascending)]="visitList.reverse" [callback]="visitList.transition.bind(this)">
<th jhiSortBy="id"><span>ID</span>
<fa-icon [icon]="'sort'"></fa-icon>
</th>
<th jhiSortBy="date"><span>Date</span>
<fa-icon [icon]="'sort'"></fa-icon>
</th>
<th jhiSortBy="clientName"><span>Client</span>
<fa-icon [icon]="'sort'"></fa-icon>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let visit of visitList; trackBy: visitList.trackId">
<td><a [routerLink]="['/visit', visit.id, 'view' ]">{{visit.id}}</a></td>
<td>{{visit.clientName}}</td>
<td>{{visit.date | date:'mediumDate'}}</td>
<td class="text-right">
<div class="btn-group flex-btn-group-container">
<button type="submit"
[routerLink]="['/visit', visit.id, 'view' ]"
class="btn btn-info btn-sm">
<fa-icon [icon]="'eye'"></fa-icon>
<span class="d-none d-md-inline">View</span>
</button>
<button type="submit"
[routerLink]="['/client', visit.id, 'edit']"
class="btn btn-primary btn-sm">
<fa-icon [icon]="'pencil-alt'"></fa-icon>
<span class="d-none d-md-inline">Edit</span>
</button>
<button type="submit"
[routerLink]="['/', { outlets: { popup: 'visit/'+ visit.id + '/delete'} }]"
replaceUrl="true"
queryParamsHandling="merge"
class="btn btn-danger btn-sm">
<fa-icon [icon]="'times'"></fa-icon>
<span class="d-none d-md-inline">Delete</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">
<p>End Visit List</p>
</div>
</div>
</div>
client.model.ts
import { Moment } from 'moment';
import { IVisit } from 'app/shared/model/visit.model';
import { IOrder } from 'app/shared/model/order.model';
export interface IClient {
id?: number;
name?: string;
birthDate?: Moment;
phoneNumber?: string;
visits?: IVisit[];
orders?: IOrder[];
}
export class Client implements IClient {
constructor(
public id?: number,
public name?: string,
public birthDate?: Moment,
public phoneNumber?: string,
public visits?: IVisit[],
public orders?: IOrder[]
) {}
}
visit.model.ts
import { Moment } from 'moment';
export interface IVisit {
id?: number;
date?: Moment;
clientName?: string;
clientId?: number;
}
export class Visit implements IVisit {
constructor(public id?: number, public date?: Moment, public clientName?: string, public clientId?: number) {}
}
visit.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import * as moment from 'moment';
import { DATE_FORMAT } from 'app/shared/constants/input.constants';
import { map } from 'rxjs/operators';
import { SERVER_API_URL } from 'app/app.constants';
import { createRequestOption } from 'app/shared';
import { IVisit } from 'app/shared/model/visit.model';
type EntityResponseType = HttpResponse<IVisit>;
type EntityArrayResponseType = HttpResponse<IVisit[]>;
@Injectable({ providedIn: 'root' })
export class VisitService {
public resourceUrl = SERVER_API_URL + 'api/visits';
constructor(protected http: HttpClient) {}
create(visit: IVisit): Observable<EntityResponseType> {
const copy = this.convertDateFromClient(visit);
return this.http
.post<IVisit>(this.resourceUrl, copy, { observe: 'response' })
.pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
}
update(visit: IVisit): Observable<EntityResponseType> {
const copy = this.convertDateFromClient(visit);
return this.http
.put<IVisit>(this.resourceUrl, copy, { observe: 'response' })
.pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
}
find(id: number): Observable<EntityResponseType> {
return this.http
.get<IVisit>(`${this.resourceUrl}/${id}`, { observe: 'response' })
.pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
}
query(req?: any): Observable<EntityArrayResponseType> {
const options = createRequestOption(req);
return this.http
.get<IVisit[]>(this.resourceUrl, { params: options, observe: 'response' })
.pipe(map((res: EntityArrayResponseType) => this.convertDateArrayFromServer(res)));
}
delete(id: number): Observable<HttpResponse<any>> {
return this.http.delete<any>(`${this.resourceUrl}/${id}`, { observe: 'response' });
}
protected convertDateFromClient(visit: IVisit): IVisit {
const copy: IVisit = Object.assign({}, visit, {
date: visit.date != null && visit.date.isValid() ? visit.date.format(DATE_FORMAT) : null
});
return copy;
}
protected convertDateFromServer(res: EntityResponseType): EntityResponseType {
if (res.body) {
res.body.date = res.body.date != null ? moment(res.body.date) : null;
}
return res;
}
protected convertDateArrayFromServer(res: EntityArrayResponseType): EntityArrayResponseType {
if (res.body) {
res.body.forEach((visit: IVisit) => {
visit.date = visit.date != null ? moment(visit.date) : null;
});
}
return res;
}
}
我的master-detail form外观如图所示。访问表的头和主体都没有。
