Angular 2 如何让数据在详情页可见?
How to make data to visible in detailed page in Angular 2?
后端
我已经使用 Django RestFrame 工作实现了 one-many 概念,我的输出就像
前端
在前端我能够检索所有数据,除了 tax_details.It 只是作为这样的对象返回。
实际上我是这个概念的新手,所以我不知道如何克服这个问题。
Html
<div class="row">
<div class="col-md-12">
<nb-card>
<nb-card-header>
<span>Product Details</span>
<span style="padding-left:75%">
<button (click)="onButtonClick()" class="btn btn-success btn-sm text-right">Edit</button>
</span>
</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-sm-6">
<div class="header">
<div>
<h6>Product Name</h6>
</div>
<div class="detail font-w-dark">{{update.pro_name}}</div>
</div>
<div class="header">
<div>
<h6>Category</h6>
</div>
<div class="detail font-w-light">{{update.category}}</div>
</div>
<div class="header">
<div>
<h6>Sales price</h6>
</div>
<div class="detail font-w-light">{{update.sales}}</div>
</div>
<div class="header">
<div>
<h6>Cost</h6>
</div>
<div class="detail font-w-light">{{update.cost}}</div>
</div>
<div class="header">
<div>
<h6>Quantity Type</h6>
</div>
<div class="detail font-w-light">{{update.type_units}}</div>
</div>
<div class="header">
<div>
<h6>HSN CODE</h6>
</div>
<div class="detail font-w-light">{{update.hsn}}</div>
</div>
<div class="header">
<div>
<h6>Description</h6>
</div>
<div class="detail font-w-light">{{update.description}}</div>
</div>
</div>
<div class="col-sm-6">
<div class="header">
<div>
<h6>Is Taxable</h6>
</div>
<div class="detail font-w-light">
{{update.taxable}}</div>
</div>
<div class="header">
<div>
<h6>Is Details</h6>
</div>
<div class="detail font-w-light">
{{update.tax_details}}</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
</div>
</div>
Component.ts
constructor(private themeService: NbThemeService,
private route: ActivatedRoute,
private breakpointService: NbMediaBreakpointsService,
private service: ProductsService,
private router: Router) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeSubscription = this.themeService.onMediaQueryChange()
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
this.route.params.subscribe(
params => {
this.user = params['id'];
});
this.service.get_update(this.user).subscribe(update => this.update = update,
error => console.log(error));
this.service.get_updatetax(this.user).subscribe(update1 => this.update1 = update1,
error => console.log(error));
this.update=([])
this.update1=([])
}
这里我提到了我的 Html, Component.ts 以及输出图像 所以请告诉我如何获取这些数据。
错误2
<div class="detail font-w-light">
<div *ngFor="let el of update.tax_details"</div>
<p> {{el.name}} {{el.percentage}} </p>
</div>
update.tax_details
是一个对象数组,所以你必须遍历它并提取所需的字段
后端
我已经使用 Django RestFrame 工作实现了 one-many 概念,我的输出就像
前端
在前端我能够检索所有数据,除了 tax_details.It 只是作为这样的对象返回。
实际上我是这个概念的新手,所以我不知道如何克服这个问题。
Html
<div class="row">
<div class="col-md-12">
<nb-card>
<nb-card-header>
<span>Product Details</span>
<span style="padding-left:75%">
<button (click)="onButtonClick()" class="btn btn-success btn-sm text-right">Edit</button>
</span>
</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-sm-6">
<div class="header">
<div>
<h6>Product Name</h6>
</div>
<div class="detail font-w-dark">{{update.pro_name}}</div>
</div>
<div class="header">
<div>
<h6>Category</h6>
</div>
<div class="detail font-w-light">{{update.category}}</div>
</div>
<div class="header">
<div>
<h6>Sales price</h6>
</div>
<div class="detail font-w-light">{{update.sales}}</div>
</div>
<div class="header">
<div>
<h6>Cost</h6>
</div>
<div class="detail font-w-light">{{update.cost}}</div>
</div>
<div class="header">
<div>
<h6>Quantity Type</h6>
</div>
<div class="detail font-w-light">{{update.type_units}}</div>
</div>
<div class="header">
<div>
<h6>HSN CODE</h6>
</div>
<div class="detail font-w-light">{{update.hsn}}</div>
</div>
<div class="header">
<div>
<h6>Description</h6>
</div>
<div class="detail font-w-light">{{update.description}}</div>
</div>
</div>
<div class="col-sm-6">
<div class="header">
<div>
<h6>Is Taxable</h6>
</div>
<div class="detail font-w-light">
{{update.taxable}}</div>
</div>
<div class="header">
<div>
<h6>Is Details</h6>
</div>
<div class="detail font-w-light">
{{update.tax_details}}</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
</div>
</div>
Component.ts
constructor(private themeService: NbThemeService,
private route: ActivatedRoute,
private breakpointService: NbMediaBreakpointsService,
private service: ProductsService,
private router: Router) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeSubscription = this.themeService.onMediaQueryChange()
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
this.route.params.subscribe(
params => {
this.user = params['id'];
});
this.service.get_update(this.user).subscribe(update => this.update = update,
error => console.log(error));
this.service.get_updatetax(this.user).subscribe(update1 => this.update1 = update1,
error => console.log(error));
this.update=([])
this.update1=([])
}
这里我提到了我的 Html, Component.ts 以及输出图像 所以请告诉我如何获取这些数据。
错误2
<div class="detail font-w-light">
<div *ngFor="let el of update.tax_details"</div>
<p> {{el.name}} {{el.percentage}} </p>
</div>
update.tax_details
是一个对象数组,所以你必须遍历它并提取所需的字段