html - 如何在 Angular 中显示列表
问题描述
我想在我的 Angular 前端显示工单列表。我的意思是在下面的图片上显示ticketId
和place
喜欢。
这是我的请求http://localhost:8080/api/customers
这是结果http://localhost:4200/customer
不幸的是,门票清单是空的。我不知道如何展示它。
这是我的课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();
}
}
解决方案
在你的customer-details.component.html
你必须迭代你的ticket
.
你可以尝试这样的事情:
<div>
<label>List of tickets: </label>
<div *ngFor="let ticket of customer.ticket">
{{ ticket.ticketId }}
{{ ticket.place }}
</div>
</div>
推荐阅读
- python - TypeError:“Board”对象不能解释为整数
- tsql - 如何在 TSQL 中将多行转换为以逗号分隔的单行?
- c++ - 当前引导会话中的 Linux 唯一进程 ID
- angular - 如何防止 canActivate 在 Angular 防护的构造函数中完成 ReplaySubject 之前执行?
- go - GoLang GORM 循环二叉树
- flutter - Flutter Inherited Custom AppBar 在 TextField 点击时消失
- c# - 为 ASP.NET Core MVC (.NET 5) 包装 DryIoc
- javascript - 如何阻止网页在 React 中全屏显示?
- node.js - 模块包装功能问题
- python - pycharm绿色箭头(调用runfile)不反映docker文件系统,需要手动编辑才能运行配置