如何在Angular中显示列表

时间:2018-12-16 15:43:51

标签: html angular

我想在我的Angular前端中显示票证列表。我的意思是像下面的图片一样显示ticketIdplace

这是我从http://localhost:8080/api/customers发出的请求

enter image description here

这是http://localhost:4200/customer

中的结果

很遗憾,票证清单为空。我不知道怎么显示。

enter image description here

这是我的课程customer-details.component.html

<div *ngIf="customer">
<div>
<label>Name: </label> {{customer.name}}
</div>
<div>
<label>Surname: </label> {{customer.surname}}
</div>
<div>
<label>List of tickets: </label> {{customer.tickets}}
</div>
<span class="button is-small btn-danger"  (click)='deleteCustomer()'>Delete</span>
<hr/>
</div>

我的课程customers-list.component.html

<div *ngFor="let customer of customers | async" style="width: 300px;">
<customer-details [customer]='customer'></customer-details>
</div>

<div>
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete all</button>
</div>

customer.service.ts

export class CustomerService {

private baseUrl = 'http://localhost:8080/api/customers';

constructor(private http: HttpClient) {
}

getCustomersList(): Observable<any> {
return this.http.get(`${this.baseUrl}`);
}

我的课程customer.ts

export class Customer {
customerId: number;
name: string;
surname: string;
tickets: Ticket[];
}
export class Ticket {
ticketId: number;
place: number;
customerId: number;
flightId: number;
}

customers-list.component.ts

export class CustomersListComponent implements OnInit {

customers: Observable<Customer[]>;

constructor(private customerService: CustomerService) { }

ngOnInit() {
this.reloadData();
}

reloadData() {
this.customers = this.customerService.getCustomersList();
}
}

2 个答案:

答案 0 :(得分:1)

在您的DOM中,您必须迭代.shift()

您可以尝试这样的事情:

customer-details.component.html

答案 1 :(得分:1)

根据json响应的图片,该属性称为ticket,而不是tickets。因此,您想重命名它(因为它显然是错误的用词)或相应地进行迭代:

*ngFor="let ticket of customer.ticket"